html复选框全选和取消全选

可以通过 JavaScript 来实现 HTML 复选框的全选和取消全选。

首先，需要在 HTML 中为全选复选框和其他子复选框添加相应的 ID 或 class，例如：

<label><input type="checkbox" id="check-all">全选</label>
<label><input type="checkbox" class="sub-check">选项1</label>
<label><input type="checkbox" class="sub-check">选项2</label>
<label><input type="checkbox" class="sub-check">选项3</label>

然后，可以使用以下 JavaScript 代码来实现全选和取消全选功能：

// 获取全选复选框和子复选框元素
var checkAll = document.getElementById('check-all');
var subChecks = document.getElementsByClassName('sub-check');

// 全选/取消全选操作
checkAll.onclick = function() {
    for (var i = 0; i < subChecks.length; i++) {
        subChecks[i].checked = checkAll.checked;
    }
}

// 子复选框状态改变时，检查是否全部选中
for (var i = 0; i < subChecks.length; i++) {
    subChecks[i].onclick = function() {
        var checkedCount = 0;
        for (var j = 0; j < subChecks.length; j++) {
            if (subChecks[j].checked) {
                checkedCount++;
            }
        }
        checkAll.checked = (checkedCount == subChecks.length);
    }
}

以上代码中，首先获取全选复选框和子复选框的元素，然后为全选复选框绑定点击事件，当全选复选框状态改变时，遍历所有子复选框，将它们的选中状态与全选复选框的状态保持一致。同时，为每个子复选框绑定点击事件，当子复选框状态改变时，遍历所有子复选框，检查是否全部选中，如果是，则将全选复选框选中，否则取消选中。