Question

I have this table of data with labels and checkboxes.

It’s currently set up for the primary row checkboxes to click simultaneously. This table also has sub rows for each primary row, and I need to add behavior to the sub rows where the identical labels also simultaneously click. For example: when I check the 1st sub row of primary row A, then the 1st sub row of primary row B will also be checked.

The table I’m currently working with is structured the same way as far as IDs and classes go.

Summary of what I’m trying: When clicking the checkbox of a sub row, its identical sub row checkbox below is also checked.

Do I add the sub rows to an array and somehow scan through them to identify a match when clicking the checkbox? Could someone please point me in the right direction on how to approach this? Thanks.

http://jsfiddle.net/c7EcH/

$(document).ready(function() {
    $("label:contains('PRIMARY ROW A')").closest('tr').attr('id', 'prime-row-a');
    $("label:contains('PRIMARY ROW B')").closest('tr').attr('id', 'prime-row-b');
    var primeRowA = $("label:contains('PRIMARY ROW A')").prev('input');
    var primeRowB = $("label:contains('PRIMARY ROW B')").prev('input');

    primeRowA.change(function(){
        primeRowB.attr('checked', $(this).is(':checked'));
    });
    primeRowB.change(function(){
        primeRowA.attr('checked', $(this).is(':checked'));
    });
});  

<table width="550" border="0" cellspacing="0" cellpadding="5">
 <tr>
   <td>
     <input type="checkbox">
     <label><span>PRIMARY ROW A</span></label></td>
 </tr>
 <tr>
   <td>
     <input type="checkbox">
     <label><span id="01">01 - SUB ROW A</span></label></td>
   </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span id="02">02 - SUB ROW B</span></label></td>
 </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span id="03">03 - SUB ROW C</span></label></td>
   </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span>PRIMARY ROW B</span></label></td>
 </tr>
 <tr>
  <td>
    <input type="checkbox">
    <label><span id="01">01 - SUB ROW A</span></label></td>
 </tr>
 <tr>
  <td>
   <input type="checkbox">
   <label><span id="02">02 - SUB ROW B</span></label></td>
 </tr>
 <tr>
  <td>
   <input type="checkbox">
   <label><span id="03">03 - SUB ROW C</span></label></td>
 </tr>
</table>

Answer 1

First off, IDs are supposed to be unique so you shouldn’t give the same id to multiple elements.

You can assign the same class to each group of checkboxes and when you click one, set the state of all the other checkboxes with the same class

$(document).ready(function() {
    $('input[type="checkbox"]').change(function () {
        var cls = $(this).attr('class');
        $('.' + cls).attr('checked', $(this).is(':checked'));
    });
});    

http://jsfiddle.net/rdmond/PGLjg/

This actually re-checks the box you just checked, but it isn’t to hard to tweak it to only change the other checkboxes with the same class.