復選框全選或取消全選

廢話不多說，直接上圖上代碼：

實現效果：

1、選中title的復選框，則td里的復選框全部選中；取消title的復選框，則td里的復選框全部取消；

2、當td里的復選框宣布選中，則title里的復選框也選中；如果td里的復選框只有部分選中，則title里的復選框不選中；

 

 

js 代碼：

// 勾選或取消勾選全選復選框,參數:1.tableId復選框所在table的ID
// 2.checkAllName=全選checkbox對象名稱,3.name=單個單選框名稱
function checkBoxOnClick(tableId, checkAllName, name) {
    $("#" + tableId + " tbody").on("click","tr td input[name='" + name + "']",
        function() {
            if ($(this).is(":checked") == true) {
                // 如果當前框被選中，則判斷是否需要勾選全選框
                var checkbox = $("input[name='" + name + "']");
                var length = $(checkbox).length;
                if (length > 0) {
                    for (var i = 0; i < length; i++) {
                        if ($(checkbox[i]).is(":checked") != true) {
                            break;// 如果有未勾選的選擇框，不需要勾選全選，跳出循環
                        }
                        if (i == length - 1) {
                            // 如果到最后一個選擇框仍然是勾選狀態，即所有選擇框都被勾選，則勾選全選框
                            $("input[name='" + checkAllName + "']")
                                    .prop("checked", true);
                            $("input[name='" + checkAllName + "']")
                                    .prop("title", "全不選");
                        }
                    }
                }
            } else {
                // 如果當前選擇框未勾選，則取消全選框勾選狀態
                $("input[name='" + checkAllName + "']").prop(
                        "checked", false);
                $("input[name='" + checkAllName + "']").prop(
                        "title", "全選");
            }
        }
    );
}

使用：

//勾選或取消全選
checkBoxOnClick("myTable","checkAll","checkOne");