Toggle (enable / disable) all checkboxes in an HTML table with jQuery

Question

I want to add an Enable all checkbox in an HTML <table>, that toggles all checkboxes inside that <table>.

I can't get it to work.

My Jquery :

var elementName = 'TestName';

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

Update:

I got it to work with this code:

var elementName = 'TestName';
var $checkboxes = $('.table-list').find('input'); 

$('input[familyname="TestName"]').on('click', function() {
    $checkboxes.prop('checked', $(this).is(':checked'));
});

However, there is bug when I want to add more tables. See this Fiddle.

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-02 14:42:56Z

2

You have to change your code like below,

var elementName = 'TestName';
$('input[familyname="' + elementName + '"]').on('click', function() {
  var elems = $(this).closest('table.table').find('tr input');
  elems.prop('checked', this.checked)
});

tr is parent in our context, so .find() over $(this) will not work out. So we have to use .closest() to grab the parent table and from that we can fetch all the required input - check box elements.

DEMO

You have same id set with two radio buttons, give unique id to radio button and use the above code.

DEMO

edited Mar 2, 2016 at 14:42

answered Mar 2, 2016 at 14:09

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

6 Comments

Edin Puzic Over a year ago

It works but if i want to have 2 tables in same time?

Rajaprabhu Aravindasamy Over a year ago

@EdinPuzic It would be better to answer if you show the entire html

Rajaprabhu Aravindasamy Over a year ago

@EdinPuzic Just give different id to that enable all check box and its label. Check this demo. jsfiddle.net/5m5a60um/28

Rajaprabhu Aravindasamy Over a year ago

@EdinPuzic By the way, Try to press the tick mark inside anyone of the answers here. As it will help the future visitors to spot a worked out answer for them. And this is not a compulsion. :)

Edin Puzic Over a year ago

Thank you very very much!! :)

|

John Slegers · Accepted Answer · 2016-03-02 15:12:02Z

1

This is a simple but optimal way to achieve the desired effect, that works for any number of checkbox groups :

var elementName = 'TestName';

$('input[familyname="' + elementName + '"]').on('click', function(e) {
    $(this)
        .closest('.table-list')
        .find('input')
        .prop('checked', this.checked);
});

(see also this Fiddle)

edited Mar 2, 2016 at 15:12

answered Mar 2, 2016 at 14:09

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

8 Comments

Edin Puzic Over a year ago

It works but if i want to have 2 tables in same time like this jsfiddle.net/5m5a60um/25

John Slegers Over a year ago

@EdinPuzic : Just add some IDs and it works fine. Also, make sure all of your IDs are unique! Check out this Fiddle here --> jsfiddle.net/5m5a60um/26

Rajaprabhu Aravindasamy Over a year ago

@JohnSlegers Will you create 100 event handlers if there are 100 tables? :\

Edin Puzic Over a year ago

@JohnSlegers It works but the probles is that I will have more then 30 tables on one page.

Rajaprabhu Aravindasamy Over a year ago

@EdinPuzic Why can't you use the approach given here

|

void · Accepted Answer · 2016-03-02 14:06:53Z

1

If you are putting in thead then you can't just directly do .find() instead traverse to tbody and select all input with type=checkbox, like:

 $(this).closest("table").find('tbody input[type=checkbox]').prop('checked', true);

Similarly do:

 $(this).closest("table").find('tbody input[type=checkbox]').prop('checked', false);

answered Mar 2, 2016 at 14:06

void

36.8k10 gold badges72 silver badges111 bronze badges

3 Comments

Edin Puzic Over a year ago

It works but if i want to have 2 tables in same time?

void Over a year ago

I dont understand, what do you mean by 2 tables in same time? @EdinPuzic

Edin Puzic Over a year ago

Like this, I have different 2 tables with enable all button jsfiddle.net/5m5a60um/27 and I need to separate enable all button. Now when i click on table number 1 it enables table number 2 also

yfet · Accepted Answer · 2016-03-02 14:16:45Z

0

Try this :

$(document).on('click', '#switchall1', function() {

if ($(this).is(':checked')) {
    $(this).closest('table').find('tbody tr input').prop('checked', true);

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

});

answered Mar 2, 2016 at 14:16

yfet

693 bronze badges

Collectives™ on Stack Overflow

Toggle (enable / disable) all checkboxes in an HTML table with jQuery

My Jquery :

Update:

4 Answers 4

DEMO

DEMO

6 Comments

8 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Jquery :

Update:

4 Answers 4

6 Comments

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related