如何選中其下面的所有復選框后選中復選框？

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 個復選框，

All
    1

    2

    3

在這里，當我嘗試檢查單個子復選框的 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 被選中，我希望 All 被選中，如果 1,2,3 中的任何一個被取消選中，All 被取消選中。

我是 jQuery 的新手，所以有人可以幫助我解決這個問題嗎？

Answer 1

為“組”中的所有復選框分配相同的名稱，類似於您處理無線電輸入的方式。

然后為全選復選框分配相同的名稱並分配某種獨特的項目，以便您可以捕獲該單個項目上的點擊事件（在我的示例中，我使用了 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/SeanWesell/11h0f2jm/