如何选中其下面的所有复选框后选中复选框？

Question

I am dynamically adding tr and td to a table this way.

var arr=[1,2,3];

                var trtest = "<tr>";
                trtest = trtest +"<tr><td><input type='checkbox' onclick=onAllCheckBoxClick('" + arr+ "') class = 'all' id ='all'>All</td></tr>";

$.each(arr, function(i, tmp) {
                    trtest = trtest +"<tr><td><input type='checkbox' onclick=onCheckBoxClick('" + this+ "','" + arr+ "') class = 'all' id ='"+tmp+"'/>"+tmp+"</td></tr>";
                });

This code is working and I am getting 4 checkboxes this way,

All
    1

    2

    3

Here, when I try to check individual child checkbox's 1,2,3 then All checkbox have to be selected.

I tried adding this click event to each checkbox this way,

function onCheckBoxClick(checkBoxId,arr){
        var chkselected = [];
            $('#generateTable').find(':checkbox:checked').each(function() {
                chkselected.push(this.id);
            });
            //
            if (arr.split(",").length == chkselected.length && ($('#'+checkBoxId).is(':checked') == true)) {
                $('#all').attr('checked',true);
            }
            //
            else if (arr.split(",").length == chkselected.length && ($('#'+checkBoxId).is(':checked') == false)) { 
                $('#all').attr('checked',false);                
            }
}

Issue is when I check 1,2, and lastly 3 immediately All check box is getting checked,

But when I try to check 3,2 and then 1 finally, All check box is not checked.

I want All to be checked if 1,2,3 are checked and All to be unchecked if any of 1,2,3 is unchecked.

I am new to jQuery and so can anyone help me in this issue?

Answer 1

Assign the all of the checkboxes in the "group" with the same name similar to how you would handle radio inputs.

Then for the select all checkbox assign the same name and also assign some sort of unique item so you can capture the click event on that individual item (in my example i used role="selectall" you can use whatever you want).

<input type="checkbox" id="checkAll" name="chkGroup1" role="selectall" />
<label for='checkAll'>Select All</label>
<br />
<input type='checkbox' id='checkbox1' name='chkGroup1' />
<label for='checkbox1'>product1</label>
<br />
<input type='checkbox' id='checkbox2' name='chkGroup1' />
<label for='checkbox2'>product2</label>
<br />
<input type='checkbox' id='checkbox3' name='chkGroup1' />
<label for='checkbox3'>product3</label>
<br />
<input type='checkbox' id='checkbox4' name='chkGroup1' />
<label for='checkbox4'>product4</label>

Since you have assigned the name you can use it as your jQuery selector and you are assigning the checked property of the input to the test of the items with the same name.

$('input:checkbox[role=selectall]').click(function () {

    $('[name="' + this.name + '"]').prop('checked', this.checked)

})

http://jsfiddle.net/SeanWessell/11h0f2jm/