How can I check multiple check boxes in jQuery?

Question

I have a table with a checkbox at the start of each row. Each Checkbox has the ID of #tablecheckbox. The table header row has a check icon which should check all boxed in the table. How can I do this with jQuery?

Make your ids a class, then follow this link: http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript?rq=1 — bfavaretto, Aug 16 '13 at 05:31
instead of using id try to use name attriubute it can help to check all check boxs. — tamilmani, Aug 16 '13 at 05:32
Can you please show the code for your table (at least the header and a few body rows)? — rink.attendant.6, Aug 16 '13 at 05:38
A simpler way of achieveing the same has been suggested here: http://stackoverflow.com/questions/15979318/how-do-i-check-multiple-checkboxes-with-jquery-without-giving-each-an-id — ds345, Aug 16 '13 at 05:57

Jay Hardia · Accepted Answer · 2013-08-16T06:18:27.357

6

Here head_checkbox is id of top header and person class is all row checkbox

 $('#head_checkbox').on('change', function () {
            if ($(this).is(':checked')) {
                $('.person').attr('checked', true);
            } else {
                $('.person').attr('checked', false);
            }
        });

        $('.person').click(function () {
            var total_length = $('.person').length;
            var total_checked_length = $('.person:checked').length;

            if (total_length == total_checked_length) {
                $('#head_checkbox').attr('checked', true);
            } else {
                $('#head_checkbox').attr('checked', false);
            }
        });

edited Aug 16 '13 at 06:18

answered Aug 16 '13 at 05:35

Jay Hardia

746
6
16

1

live is deprecated since 1.7 on() should be used instead – DGS Aug 16 '13 at 05:54
I used to set `document.getElementById("head_checkbox").checked` attribute. Your approach seems more clean. Thanks. – Aryan Firouzian Jan 16 '19 at 09:48

score 2 · Answer 2 · answered Aug 16 '13 at 05:51

       $('#head_checkbox').click(function () {
            if ($(this).is(':checked')) {
                $('.person').attr('checked', true);
            } else {
                $('.person').attr('checked', false);
            }
        });


        $('.person').click(function () {
            if ($('.person').length == $('.person:checked').length) {
                $('#head_checkbox').attr('checked', true);
            } else {
                $('#head_checkbox').attr('checked', false);
            }
        });

How can I check multiple check boxes in jQuery?

2 Answers2

Linked