CODEWITHSUNDEEP
javascriptjquery
mrtonyb
mrtonyb

Reputation: 615

jQuery Add behavior to matching checkboxes in table

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>

Upvotes: 0

Views: 180

Answers (2)

Sean Redmond
Sean Redmond

Reputation: 4114

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.

Upvotes: 1

Taimur Amjad
Taimur Amjad

Reputation: 392

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.

Upvotes: 0

Related Questions