javascript tutorial - [Solved-5 Solutions] Setting “checked” for a checkbox with jQuery - javascript - java script - javascript array
Problem:
we'd like to do something like this to tick a checkbox using jQuery:
$(".myCheckBox").checked(true);click below button to copy the code. By JavaScript tutorial team
or
$(".myCheckBox").selected(true);click below button to copy the code. By JavaScript tutorial team
Does such a thing exist?
Solution 1:
accepted jQuery 1.6+
Use the new .prop() method:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);click below button to copy the code. By JavaScript tutorial team
jQuery 1.5.x and below
The .prop() method is not available, so we need to use .attr().
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);click below button to copy the code. By JavaScript tutorial team
Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using
$('.myCheckbox').removeAttr('checked');click below button to copy the code. By JavaScript tutorial team
- since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it - a subtle but probably unwelcome behaviour change.
- For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.
- Any version of jQuery
- If you're working with just one element, we can always just modify the HTMLInputElement's .checked property:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;click below button to copy the code. By JavaScript tutorial team
The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.
Solution 2:
Use:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);click below button to copy the code. By JavaScript tutorial team
And if we want to check if a checkbox is checked or not:
$('.myCheckbox').is(':checked');click below button to copy the code. By JavaScript tutorial team
Solution 3:
$('.myCheckbox').attr('checked',true) //Standards compliantclick below button to copy the code. By JavaScript tutorial team
or
$("form #mycheckbox").attr('checked', true)click below button to copy the code. By JavaScript tutorial team
If we have custom code in the onclick event for the checkbox that we want to fire, use this one instead:
$("#mycheckbox").click();click below button to copy the code. By JavaScript tutorial team
We can uncheck by removing the attribute entirely:
$('.myCheckbox').removeAttr('checked')click below button to copy the code. By JavaScript tutorial team
We can check all checkboxes like this:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});click below button to copy the code. By JavaScript tutorial team
Solution 4:
We can also extend the $.fn object with new methods:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
Then we can just do:
$(":checkbox").check();
$(":checkbox").uncheck();click below button to copy the code. By JavaScript tutorial team
Or we may want to give them more unique names like mycheck() and myuncheck() in case we use some other library that uses those names.
Solution 5:
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();click below button to copy the code. By JavaScript tutorial team
The last one will fire the click event for the checkbox, the others will not. So if we have custom code in the onclick event for the checkbox that we want to fire, use the last one.