Question

我以这种方式动态地将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>";
                });

此代码正常运行，我以这种方式获得4个复选框，

在这里，当我尝试检查单个孩子复选框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,2,3被选中，我想要全部检查，如果未选中1,2,3中的任何一个，则取消选中全部。

我是jQuery的新手，所以有人可以帮我解决这个问题吗？

Answer 1

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

然后，对于select all复选框分配相同的名称并分配某种独特的项目，以便您可以捕获该单个项目上的click事件（在我的示例中，我使用了role =“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>

由于您已分配名称，因此可以将其用作jQuery选择器，并将输入的checked属性分配给具有相同名称的项目的测试。

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

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

})

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

如果选中下面的所有复选框，如何选中复选框？

1 个答案: