Stack Exchange
jQuery - checkboxes & checkall - monitoring & changing the status if related checkboxes change
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">&nbsp;&nbsp;Room No 2<input type="checkbox" align="left" class="checkall" id="RoomNbr2" name="RoomNbr2"></label></td><td><label for="PCNbr203" align="right">&nbsp;&nbsp;203<input type="checkbox" align="left" id="PCNbr203" name="PCNbr203" class="RoomNbr2"></label></td><td><label for="PCNbr204" align="right">&nbsp;&nbsp;204<input type="checkbox" align="left" id="PCNbr204" name="PCNbr204" class="RoomNbr2"></label></td></tr>
<tr><td><label for="RoomNbr3" align="right">&nbsp;&nbsp;Room No 3<input type="checkbox" align="left" class="checkall" id="RoomNbr3" name="RoomNbr3"></label></td><td><label for="PCNbr310" align="right">&nbsp;&nbsp;310<input type="checkbox" align="left" id="PCNbr310" name="PCNbr310" class="RoomNbr3"></label></td><td><label for="PCNbr320" align="right">&nbsp;&nbsp;320<input type="checkbox" align="left" id="PCNbr320" name="PCNbr320" class="RoomNbr3"></label></td><td><label for="PCNbr340" align="right">&nbsp;&nbsp;340<input type="checkbox" align="left" id="PCNbr340" name="PCNbr340" class="RoomNbr3"></label></td><td><label for="PCNbr350" align="right">&nbsp;&nbsp;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!

are you saying, that you can auto-check all checkboxes based on clicking of room number, but not vice versa?

That is correct.  In the example above, clicking on Room No 2s checkbox will put a check in that box, and will also check the boxes for 203 & 204.  If Room No 3s box is checked, that checkbox will be checked & so will the ones for 310, 320, 340 & 350. I have a class assigned to each individual checkbox called RoomNbrX that the checkall class for the Room uses to apply a checked status to every checkbox with that class.
