创建一个js复选框全选案例

以下是一个简单的JavaScript复选框全选案例：

HTML代码：

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

JavaScript代码：

// 获取全选复选框和所有子复选框
var checkAll = document.querySelector('.check-all');
var checkboxes = document.querySelectorAll('.checkbox');

// 给全选复选框添加点击事件
checkAll.addEventListener('click', function() {
    // 遍历所有子复选框，设置它们的选中状态与全选复选框相同
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = checkAll.checked;
    }
});

// 给所有子复选框添加点击事件
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function() {
        // 如果所有子复选框都被选中，则将全选复选框也设置为选中状态，否则设置为未选中状态
        if (document.querySelectorAll('.checkbox:checked').length === checkboxes.length) {
            checkAll.checked = true;
        } else {
            checkAll.checked = false;
        }
    });
}

当点击全选复选框时，所有子复选框的选中状态都会被设置成与全选复选框相同；当点击任何一个子复选框时，如果所有子复选框都被选中，则全选复选框也会被设置成选中状态，否则设置为未选中状态。