Checkbox to select all rows in a table

Question

I have a table inside a table. The basic structure is as follows

<input type="checkbox" name="CheckAll" id="CheckAll"/> <b>Click to select all Option Values</b>
<table class="Parent">
  <tr>
     <td><input type="checkbox" id="Parent">Parent1</td>
     <td><table class="Children">
        <tr><td><input type="checkbox" id="Child">Child1</td></tr>  
        <tr><td><input type="checkbox" id="Child">Child2</td></tr>
        <tr><td><input type="checkbox" id="Child">Child3</td></tr>
     <td>
  </tr>
  <tr>
     <td><input type="checkbox" id="Parent">Parent2</td>
     <td><table class="Children">
        <tr><td><input type="checkbox" id="Child">Child1</td></tr>  
        <tr><td><input type="checkbox" id="Child">Child2</td></tr>
     <td>
  </tr>

When I click Check All, the checkbox above the table, I want all the Check boxes to be selected or deselected. Which I did with the following

    $(document).ready(function () {
        $("#CheckAll").change(function () {
            $("input:checkbox").prop('checked', $(this).prop("checked"));
        });
    });

Now I am trying to select all Children when one of the parent is selected. Suppose I do not have access to the parent id in my View. How can I access only the table that is adjacent to the checkbox that is being changed?

The best possible id I can give is the name of the parent itself. — Vini
– Vini, Commented Feb 15, 2016 at 12:36
Change de id property to class Parent and you can selector by .Parent[type=checkbox] — Joaquinglezsantos
– Joaquinglezsantos, Commented Feb 15, 2016 at 12:41
@Joaquinglez: i will change it to class.. and use adeneo's answer — Vini
– Vini, Commented Feb 15, 2016 at 12:42

adeneo · Accepted Answer · 2016-02-15 12:37:18Z

3

You can do that by targeting the next TD, and then table it contains.
Note that you have to change #Parent, #Child etc to classes, as you can't have duplicate ID's.

$('.Parent[type=checkbox]').on('change', function() {
    $(this).closest('td')
           .next('td')
           .find('table input[type=checkbox]')
           .prop('checked', this.checked);
});

answered Feb 15, 2016 at 12:37

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

3 Comments

nnnnnn Over a year ago

Regarding your note about ids, you can have duplicates if you can still sleep at night knowing you've created invalid html. You could change your selector to work with the duplicates (I believe if you use the "attribute equals" selector to specify id it will work, even though the #id selector won't).

nnnnnn Over a year ago

Vini - Good. Certainly classes are the way to go. (I just put the note above because sometimes the person writing JS for a project isn't allowed to change the html that somebody else has created.)

adeneo Over a year ago

@nnnnnn - that is true, duplicate ID's usually won't break anything, it's just invalid, like a href on a span and many other things one could do. $('[id=Parent]') would get you all the elements, it's just getElementById that only gets the first elements, which jQuery also uses internally when an ID is passed as a selector. Of course, if one can change the HTML, using classes is the better option.

Adil · Accepted Answer · 2016-02-15 12:39:06Z

1

Try this,

$(this).parent().next('td').find(':checkbox').prop('checked', this.chekced);

As a side note you have more then elements with same id i.e. Parent which is wrong. You must have unique ids. Instead of giving same id you can use class Parent.

edited Feb 15, 2016 at 12:39

answered Feb 15, 2016 at 12:36

Adil

148k25 gold badges217 silver badges207 bronze badges

3 Comments

Vini Over a year ago

What if i give the name of the parent as the ID? Will it work? In that case what do i write in the jquery?

Adil Over a year ago

Instead of giving same id you can use class Parent

Vini Over a year ago

Yes. i have changed it to class. thanks for your answer

Collectives™ on Stack Overflow

Checkbox to select all rows in a table

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related