JQuery check multiple checkbox's within a table row

Question

I have HTML as below:

<tr class="gridSubHeader1">
<td colspan="6"><input type="checkbox" familyname="TestName" onclick="javascript: HandleClick('TestName');">EB - Autonomy</td>
</tr>
<tr class="gridSubHeader1" rowID="1000748" id="TestName">
<td class="formBodyOddRow" width="20">1&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000749" id="TestName">
<td class="formBodyEvenRow" width="20">2&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000750" id="TestName">
<td class="formBodyOddRow" width="20">3&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="237" id="TestName">
<td class="formBodyEvenRow" width="20">4&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>

<tr class="gridSubHeader1">
<td colspan="6"><input type="checkbox" familyname="TestName2" onclick="javascript: HandleClick('TestName2');">EB - Another</td>
</tr>
<tr class="gridSubHeader1" rowID="1000748" id="TestName2">
<td class="formBodyOddRow" width="20">1&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000749" id="TestName2">
<td class="formBodyEvenRow" width="20">2&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000750" id="TestName2">
<td class="formBodyOddRow" width="20">3&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="237" id="TestName2">
<td class="formBodyEvenRow" width="20">4&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>

there could be multiple rows, with row representing a particular family. see the above, there are 2 families, TestName and TestName 2. Each can have one or more checkbox's with each row.

script code:

<script language="javascript" type="text/javascript">
    function HandleClick(elementName) {
         if ($("input[familyname='" + elementName + "']").is(':checked')) {
            $("#" + elementName).each(function () {
                $(this).find('input', 'checkbox').attr('checked', true);
            });
        }
        else {
            $("#" + elementName).each(function () {
                $(this).find('input', 'checkbox').attr('checked', false);
            });
        }
    }
</script>

It seems to select only the first checkbox, instead of selecting all the 4. Can you suggest what is wrong...

Sushanth -- · Accepted Answer · 2012-10-12 00:19:16Z

1

ID in a HTML page is unique..

So when you are trying to select Multiple id's , because the ID is unique , it stops the search after encountering the first ID element.. That's the reason only the first is being checked

So you need to modify you selector.. Also you do not need the $.each iterator to get this working .. try this

$(this).closest('tr').nextAll('tr').find('input').prop('checked', true);

Try this code.. JS

var elementName = 'TestName' ;
$('input[familyname="TestName"]').on('click', function() {
    if ($("input[familyname='" + elementName + "']").is(':checked')) {
        $(this).closest('tr').nextAll('tr').find('input').prop('checked', true);

    }
    else {
        $(this).closest('tr').nextAll('tr').find('input').prop('checked', false);
    }
});

HTML

<table>
   <tr class="gridSubHeader1">
      <td colspan="6"><input type="checkbox" familyname="TestName" />EB - Autonomy</td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000748">
      <td class="formBodyOddRow" width="20">1&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000749">
      <td class="formBodyEvenRow" width="20">2&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000750">
      <td class="formBodyOddRow" width="20">3&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="237">
      <td class="formBodyEvenRow" width="20">4&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
</table>

I have removed the ID from your table. Make sure they are Unique on the page

Also this line can be

if ($("input[familyname='" + elementName + "']").is(':checked'))

// replaced with

if ($(this).is(':checked'))

CHECK FIDDLE

EDITED

This is the code with the eventHandler defined in the HTML itself..

<table>
   <tr class="gridSubHeader1">
      <td colspan="6"><input type="checkbox" familyname="TestName" onclick="javascript:HandleClick('TestName');" />EB - Autonomy</td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000748">
      <td class="formBodyOddRow" width="20">1&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000749">
      <td class="formBodyEvenRow" width="20">2&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000750">
      <td class="formBodyOddRow" width="20">3&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="237">
      <td class="formBodyEvenRow" width="20">4&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
</table>
<script language="javascript" type="text/javascript">
   function HandleClick(elementName) {
       var $checkBox = $("input[familyname='" + elementName + "']") ;
       if ($checkBox.is(':checked')) {
            $checkBox.closest('tr').nextAll('tr').find('input').prop('checked', true);
       }
       else {
          $checkBox.closest('tr').nextAll('tr').find('input').prop('checked', false);
       }
   }
</script>

edited Oct 12, 2012 at 0:19

answered Oct 11, 2012 at 23:26

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

11 Comments

Sushanth -- Over a year ago

I have edited the post that includes the handler in html.. Check edit

Kiran D Over a year ago

your second edit seems to work. but its selecting all the families, including checkbox's that are outside

Sushanth -- Over a year ago

You are using this in your code, which references the window object.. I have included that in the code

Sushanth -- Over a year ago

If you are using jquery to define the event then you can use this,, but when you call a function from HTML , this is the window object

Kiran D Over a year ago

Edited my original HTML. there cud be multiple families. Your most recent solution works, but its selecting all checkbox's instead of just its families checkbox's. See my edited HTML above.

|

Brian Noah · Accepted Answer · 2012-10-11 23:31:57Z

0

I recreated it on jsfiddle: http://jsfiddle.net/bjoshuanoah/Rsasf/

replace id's with classes for something that is used multiple times.

Oh, and unless you ABSOLUTELY need too, please don't code in tables.... 8\

This works:

<tr class="gridSubHeader1">
<td colspan="6"><input type="checkbox" familyname="TestName">EB - Autonomy</td>
</tr>
<tr class="gridSubHeader1" rowID="1000748" id="TestName">
<td class="formBodyOddRow" width="20">1&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000749" id="TestName">
<td class="formBodyEvenRow" width="20">2&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000750" id="TestName">
<td class="formBodyOddRow" width="20">3&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="237" id="TestName">
<td class="formBodyEvenRow" width="20">4&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>

With the JS:

var handleClick = function(elementName) {
         if ($("input[familyname='" + elementName + "']").is(':checked')) {
            $("input." + elementName).each(function () {
                $(this).attr('checked', true);
            });
        }
        else {
            $("input." + elementName).each(function () {
                 console.log('tr'); 
                $(this).attr('checked', false);
            });
        }
}

$('input[familyname="TestName"]').click(function(){
    handleClick('TestName');
});

answered Oct 11, 2012 at 23:31

Brian Noah

2,99220 silver badges28 bronze badges

4 Comments

Brian Noah Over a year ago

If this were data, I'd agree. :) however, this seems to be a roundabout way of aligning checkboxes that could be done with css.

Kiran D Over a year ago

I agree, but this is the HTML that I receive, I don't have total control over it to change it. I can consume it only and have to write jquery using it.

Brian Noah Over a year ago

Gotcha. Let me see what I can do.

Kiran D Over a year ago

Thanks Brian. Please take a look at my recent edit, i updated the HTML to reflect the changes.

Collectives™ on Stack Overflow

JQuery check multiple checkbox's within a table row

2 Answers 2

11 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related