Javascript 当复选框下面的所有复选框都选中时，如何选中复选框？

我以这种方式动态地将tr和td添加到表中

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>";
                });

在这里，当我尝试选中单个子复选框的1、2、3时，必须选中所有复选框

我尝试通过这种方式将此单击事件添加到每个复选框中

All
    1

    2

    3

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);                
            }
}

问题是当我选中1,2，最后3时，所有复选框都立即被选中

但当我尝试勾选3，2，然后最后勾选1时，所有复选框都没有勾选

如果1,2,3被选中，我希望所有的都被选中，如果1,2,3中的任何一个被选中，我希望所有的都被选中

---

我是jQuery新手，所以有人能在这个问题上帮助我吗？

将“组”中的所有复选框指定为相同名称，类似于处理无线电输入的方式

然后，对于“全选”复选框，指定相同的名称，并指定某种类型的唯一项目，以便您可以捕获单个项目上的单击事件（在我的示例中，我使用role=“selectall”可以使用任何您想要的内容）

---

请在上发布一个功能示例，说明您的问题。我想从另一个角度来解释。如果选中了复选框1、复选框2、复选框3、复选框4，则必须自动选中所有复选框。如果选中了chkGroup1中的所有复选框，则自动选择CHECKALLASET。如果未选中chkGroup1中的任何复选框，则必须取消选中所有复选框。这样，您需要删除name=“group”从selectall按钮？

<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>

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

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

})