I am trying to come up with some code that I can execute onclick that will check a specific checkbox on a page. The checkbox does not have a unique name and does not have an ID. The only usable identifier is the value.
I am limited to jQuery 1.4.2.
Nothing I have tried will work. Any ideas?
Thanks.
This is obviously something you want to avoid doing but if the value is all you got, you'll have to traverse through the DOM for that input field where type=checkbox and where value is the value that you are looking for. What you can do is write a jQuery select for $('input[type=checkbox]') and there loop through all the checkboxes that have the value that you are looking for.
$checkbox = $('input[type=checkbox]')
$checkbox.each( function(k,v){
if( $(v).attr('val') == somevalue ){ //using attr() instead of .val() since it's a checkbox
$(v).attr('checked',true)
}
}
So I checked out if you can just directly select it in jquery 1.4 using plunkr.
$("input:checkbox[value='someVal']").attr("checked", "checked")
And this works fine. Here's the plunk url to check out http://plnkr.co/edit/2sSjONghE5IfGlAvN2kk?p=preview
This should work in earlier versions of jQuery:
$("input:checkbox[value='someVal']").attr("checked", "checked")
Here is a fiddle.
You can try:
$("input[type=checkbox][value=myvalue]").click(function() {
alert('clicked');
});
You can refer it it by it's index id or by value
Related
guys i have a function which when used it should check all the boxes and uncheck them. this was the original one that works great
$('#checkAllId').change(function(){
if($(this).attr('checked')){
//uncheck all the checkboxes
$("input[type='checkbox']").each(
function() {
$(this).attr('checked',false);
}
);
}else{
//check all the checkboxes
$("input[type='checkbox']").each(
function() {
$(this).attr('checked',true);
}
);
}
});
however i adapted the function so i could target specific checkboxes with a certain class. here is the adapted version
$('#checkAllId').change(function(){
if($(this).attr('checked')){
//uncheck all the checkboxes
$("input.mainobservations:checkbox").each(
function() {
$(this).attr('checked',false);
}
);
}else{
//check all the checkboxes
$("input.mainobservations:checkbox").each(
function() {
$(this).attr('checked',true);
}
);
}
});
This works to check all the boxes but it doesnt not work to uncheck all the boxes. Why is this?
You need to use .prop to set a checkbox to checked/unchecked instead of .attr:
$(this).prop('checked',true);
Use .prop(). Try this:
$(this).prop('checked',true);
Go through this for .prop() vs .attr()
Assuming you're using a version of jQuery that has access to prop() you should use that instead of attr(), and I'd suggest the following approach:
$('#checkAllId').change(function(){
$('input.mainobservations[type="checkbox"]').prop('checked', this.checked);
});
Rudimentary JS Fiddle demo.
As to why, it's worth referring to the jQuery API for the prop() method:
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.
Have looked for a solution to this but not found one.
$(document).ready(function() {
if ($("input").value()) {
$("h1").hide();
}
}
So this does not seem to be working ( $("h1").hide() is just a placeholder action... that part is not important, the problem is that the if statement is not working).
There is one form on the page, <input type=text>. I want to make it so that at all times, if there is any text in the input box a certain state is applied. If the input box returns to empty then the state is removed.
There are quite a few other functions inside the $(document).ready function which I omitted due to clarity... but as far as the scope of where the if statement lies it is directly inside of the document.ready function. P.S. The form is shown and hidden dynamically, but it is hard coded -- it is not being created dynamically.
What is wrong with where I have this if statement located?
Try with .val() like
$(document).ready(function(){
if ($("input").val()) {
$("h1").hide();
}
});
Better you use either name or id or class names as selectors.Because input can be of any number and they also includes checkboxes,radio buttons and button types
In jQuery you have to use .val() method and not .value(). Your check should be as follows:
if ($("input").val()) {
$("h1").hide();
}
Unlike .value() in JS, ther's .val() in JQuery.
$(document).ready(function() {
if ($("input").value()) {
$("h1").hide();
}
});
You should use keyup to know when a key is added/removed from the textbox
$(document).ready(function() {
$("#input_data").keyup(function() {
var dInput = $(this).val();
alert(dInput);
});
});
DEMO
NOTE: Since input can be of any number and checkboxes, radio buttons and button types all are included within the HTML input tag, You should use either name or id or class names as **selectors**.
input[type=text]
or, to restrict to text inputs inside forms
form input[type=text]
or, to restrict further to a certain form, assuming it has id myForm
#myForm input[type=text]
If You want a multiple attribute selector
$("input[type='checkbox'][name='ProductCode']")
//assuming input type as checkbox and name of that input being ProductCode
.value() is invalid. You should use .val() instead of .value(). Hope it will make it work?
You should use val at the place of value and the solution is :
$(document).ready(function() {
if ($("input").val()) {
$("h1").hide();
}
});
I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.
Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?
Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO
You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});
I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.
I've been trying to figure out how to add the attribute "checked" to a checkbox on click. The reason I want to do this is so if I check off a checkbox; I can have my local storage save that as the html so when the page refreshes it notices the checkbox is checked. As of right now if I check it off, it fades the parent, but if I save and reload it stays faded but the checkbox is unchecked.
I've tried doing $(this).attr('checked'); but it does not seem to want to add checked.
EDIT:
After reading comments it seems i wasn't being clear.
My default input tag is:
<input type="checkbox" class="done">
I need it top be so when I click the checkbox, it adds "checked" to the end of that. Ex:
<input type="checkbox" class="done" checked>
I need it to do this so when I save the html to local storage, when it loads, it renders the checkbox as checked.
$(".done").live("click", function(){
if($(this).parent().find('.editor').is(':visible') ) {
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
}
if ($(this).is(':checked')) {
$(this).parent().fadeTo('slow', 0.5);
$(this).attr('checked'); //This line
}else{
$(this).parent().fadeTo('slow', 1);
$(this).removeAttr('checked');
}
});
$( this ).attr( 'checked', 'checked' )
just attr( 'checked' ) will return the value of $( this )'s checked attribute. To set it, you need that second argument. Based on <input type="checkbox" checked="checked" />
Edit:
Based on comments, a more appropriate manipulation would be:
$( this ).attr( 'checked', true )
And a straight javascript method, more appropriate and efficient:
this.checked = true;
Thanks #Andy E for that.
It seems this is one of the rare occasions on which use of an attribute is actually appropriate. jQuery's attr() method will not help you because in most cases (including this) it actually sets a property, not an attribute, making the choice of its name look somewhat foolish. [UPDATE: Since jQuery 1.6.1, the situation has changed slightly]
IE has some problems with the DOM setAttribute method but in this case it should be fine:
this.setAttribute("checked", "checked");
In IE, this will always actually make the checkbox checked. In other browsers, if the user has already checked and unchecked the checkbox, setting the attribute will have no visible effect. Therefore, if you want to guarantee the checkbox is checked as well as having the checked attribute, you need to set the checked property as well:
this.setAttribute("checked", "checked");
this.checked = true;
To uncheck the checkbox and remove the attribute, do the following:
this.setAttribute("checked", ""); // For IE
this.removeAttribute("checked"); // For other browsers
this.checked = false;
If .attr() isn't working for you (especially when checking and unchecking boxes in succession), use .prop() instead of .attr().
A simple answer is to add checked attributes within a checkbox:
$('input[id='+$(this).attr("id")+']').attr("checked", "checked");
use this code
var sid = $(this);
sid.attr('checked','checked');
I'm trying to get all of my checkboxes to be checked when clicking a link
looks like this: select all
inputs in a loop: <input type="checkbox" name="delete[$i]" value="1" />
jquery code:
var checked_status = this.checked;
$("input[name=delete]").each(function() {
this.checked = checked_status;
});
Can someone help me get it to check all.. ?
When clicking at the select all link, nothing seems to happen.. (not even an error)
Try the following.
Updated. The handler is tied to an anchor therefore there will be no this.checked attribute available.
$("#select_all").click(function(){
$("input[name^=delete]").attr('checked', 'checked');
});
jQuery Tutorial: Select All Checkbox
You're going to want to use the [name^=delete] selector ("starts with"), since your checkboxes names aren't exactly "delete", they're "delete[X]' for some number X.