How to listen to when a checkbox is checked in Jquery
JqueryJquery Problem Overview
I need to know when any checkbox on the page is checked:
e.g.
<input type="checkbox">
I tried this in Jquery
$('input type=["checkbox"]').change(function(){
alert('changed');
});
But it didn't work, any ideas?
Jquery Solutions
Solution 1 - Jquery
Use the change()
event, and the is()
test:
$('input:checkbox').change(
function(){
if ($(this).is(':checked')) {
alert('checked');
}
});
I've updated the above, to the following, because of my silly reliance on jQuery (in the if
) when the DOM properties would be equally appropriate, and also cheaper to use. Also the selector has been changed, in order to allow it to be passed, in those browsers that support it, to the DOM's document.querySelectorAll()
method:
$('input[type=checkbox]').change(
function(){
if (this.checked) {
alert('checked');
}
});
For the sake of completion, the same thing is also easily possible in plain JavaScript:
var checkboxes = document.querySelectorAll('input[type=checkbox]'),
checkboxArray = Array.from( checkboxes );
function confirmCheck() {
if (this.checked) {
alert('checked');
}
}
checkboxArray.forEach(function(checkbox) {
checkbox.addEventListener('change', confirmCheck);
});
References:
- JavaScript:
Array.from()
.Array.prototype.forEach()
.document.querySelectorAll()
.EventTarget.addEventListener()
.- jQuery:
:checked
.change()
.is()
.
Solution 2 - Jquery
$('input:checkbox').live('change', function(){
if($(this).is(':checked')){
alert('checked');
} else {
alert('un-checked');
}
});
jsfiddle: http://jsfiddle.net/7Zg3x/1/
Solution 3 - Jquery
$('input:checkbox').change(function(){
if($(this).is(':checked')){
alert('Checked');
}
});
Solution 4 - Jquery
Try this
$('input:checkbox').change(function(){
if(this.checked)
alert('checked');
else
alert('not checked');
});
Solution 5 - Jquery
If you want to use .on this works
jQuery('input[type=checkbox]').on('change', function() {
if (this.checked) {
console.log('checked');
}
});
Solution 6 - Jquery
$("input:checkbox").change(function(){
alert($(this).val());
});
here is the fiddle http://jsfiddle.net/SXph5/
Solution 7 - Jquery
$("input[type='checkbox']").click(function(){
alert("checked");
});
Just a normal .click
will do.