jQuery Add behavior to matching checkboxes in table

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>

Sean Redmond · Accepted Answer · 2012-11-16 17:56:18Z

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.

edited Nov 16, 2012 at 17:56

answered Nov 16, 2012 at 17:51

Sean Redmond

4,1741 gold badge25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taimur Amjad · Accepted Answer · 2012-11-16 17:51:44Z

0

first thing use unique name and ID's - u may give a name to your input field i.e. for instance - for row 1

<label for="row1">ROW 1</label>
<input name = "row1" type = "checkbox" /> // row1
<input name = "subrow1a" type = "checkbox" /> // sub row of row1
// you can also use arrays of name i.e. like `name = subrow1[]`

for row2

<label for="row2">ROW 2</label>
<input name = "row2" type = "checkbox" /> // row 2
<input name = "subrow2a" type = "checkbox" /> // sub row of row2

secondly.. you can call also call a Jquery/JavaScript function on check i.e. onclick() to perform required action.

answered Nov 16, 2012 at 17:51

Taimur Amjad

3922 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery Add behavior to matching checkboxes in table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related