表单全选取消全选案例

表单中的全选和取消全选功能通常是通过JavaScript操作来实现的，特别是在处理复选框或单选按钮等集合时。下面是一个简单的HTML和JavaScript示例：

<form>
    <input type="checkbox" id="allCheck" value="All"> 全选<br>
    <br>
    <!-- 复选框列表 -->
    <input type="checkbox" name="items[]" value="1">
    <label for="item1">选择1</label><br>
    <input type="checkbox" name="items[]" value="2">
    <label for="item2">选择2</label><br>
    <!-- ...更多复选框... -->
</form>

<script>
    // 获取全选复选框和所有复选框
    const allCheck = document.getElementById('allCheck');
    const checkboxes = document.getElementsByName('items[]');

    // 初始化全选功能
    allCheck.addEventListener('change', function() {
        if (this.checked) { // 如果全选框被勾选
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = true; // 将所有复选框设为选中状态
            });
        } else { // 如果全选框未勾选
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = false; // 取消所有复选框的选中状态
            });
        }
    });

    // 当用户点击任意复选框时，取消全选效果
    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('click', function() {
            if (!allCheck.checked) { // 如果不是全选状态
                allCheck.checked = false; // 用户手动选择了某一项，自动取消全选
            }
        });
    });
</script>

在这个例子中，当用户点击“全选”复选框时，会设置所有其他复选框的状态；而当用户点击任何一个普通复选框时，如果该全选复选框未被勾选，则会自动取消全选。