问题
Using jQuery 1.9.1, and working with both IE8 and Firefox. On my page, I have a table that has checkboxes that get dynamically created.
When displayed, the HTML for a couple rows is as below:
<tr><td><label for="RoomNbr2" align="right"> Room No 2<input type="checkbox" align="left" class="checkall" id="RoomNbr2" name="RoomNbr2"></label></td><td><label for="PCNbr203" align="right"> 203<input type="checkbox" align="left" id="PCNbr203" name="PCNbr203" class="RoomNbr2"></label></td><td><label for="PCNbr204" align="right"> 204<input type="checkbox" align="left" id="PCNbr204" name="PCNbr204" class="RoomNbr2"></label></td></tr>
<tr><td><label for="RoomNbr3" align="right"> Room No 3<input type="checkbox" align="left" class="checkall" id="RoomNbr3" name="RoomNbr3"></label></td><td><label for="PCNbr310" align="right"> 310<input type="checkbox" align="left" id="PCNbr310" name="PCNbr310" class="RoomNbr3"></label></td><td><label for="PCNbr320" align="right"> 320<input type="checkbox" align="left" id="PCNbr320" name="PCNbr320" class="RoomNbr3"></label></td><td><label for="PCNbr340" align="right"> 340<input type="checkbox" align="left" id="PCNbr340" name="PCNbr340" class="RoomNbr3"></label></td><td><label for="PCNbr350" align="right"> 350<input type="checkbox" align="left" id="PCNbr350" name="PCNbr350" class="RoomNbr3"></label></td></tr>
When the user clicks on a Room, all the related checkboxes (the PCNbrXXX) related to that Room are checked. The user can also select individual checkboxes, or they can select/unselect individual ones.
What I have noticed is that if I check the Room Nbr, it will check all the related checkboxes for it, but if I unselect them individually, the Room Nbr checkbox remains checked. The code I use to check all the boxes is:
$('#mytable').on('click','.checkall', function() {
$('input.' + this.id).prop('checked', this.checked);
});
The code I am using to catch individual checks is:
$('#mytable').on('click', function() {
$('input.' + this.id).prop('checked', this.checked);
});
In IE8 and Firefox, what I need to do is to monitor if any individual checkboxes are checked & change the display status of the Room Nbr checkboxes to (1) show checked if all on that row are checked, (2) change to an indeterminate status (and checkall cleared) if 1 or more on a row are cleared, and (3) to show cleared if all individual checkboxes on the row are cleared.
I have a class assigned to each individual checkbox that gives me the name & ID of the Room Nbr checkbox, but I am not sure how to go about managing the states in #1 and #3 described above, or if #2 (showing indeterminate status) is possible in IE8. At the very least, I'd want to toggle the status to checked (if all are checked) or cleared if 1 or more on the row has been cleared.
I'd appreciate any suggestions as to how to go about doing the above. I'm using the following to know what is checked at any given time:
$("input[name*=PCNbr]:checked").map(function () {return this.name;}).get().join(",")
and thought I could grab the Class I assigned to them but haven't gotten it to work properly yet.
Thanks!
来源：https://stackoverflow.com/questions/19014418/jquery-checkboxes-checkall-monitoring-changing-the-status-if-related-che