Checkbox change event not firing
Question
This is my code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.chk').live('change', function() {
alert('change event fired');
});
$('a').click(function() {
$('.chk').attr('checked', true);
});
});
</script>
</head>
<body>
<div class="chkHolder">
<input type="checkbox" class="chk" name="a" id="a" />
<input type="checkbox" class="chk" name="b" id="b" />
</div>
<a href="#">check all</a>
</body>
</html>
When I click on the "check all" hyperlink, I want the change event fired for each of the checkboxes. However, that is not happening.
Any ideas?
Many thanks!
4 answers
solution1
31 ACCPTED 2011-09-12 12:08:39
use: $('.chk').attr('checked', true).change();
Live example: http://jsfiddle.net/NRPSA/1/
solution2
6 2011-09-12 12:07:55
When you change the attribute also use the following:
$('.chk').trigger('change');
Or in your code like other people have suggested:
$('.chk').attr('checked', true).trigger('change');
solution3
3 2011-09-12 12:08:45
Try changing
$('a').click(function() {
$('.chk').attr('checked', true);
});
To -
$('a').click(function() {
$('.chk').attr('checked', true).trigger('change');
});
That should force a trigger of the 'change' event.
Working demo - http://jsfiddle.net/ipr101/pwmBE/
solution4
0 2011-09-12 12:11:27
try this.
<div id ="chkall"> <a href="#">check all</a> <div>
$('#chkall a').live("change", function() {
$('.chk').attr('checked', true);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.