Razor中实现带事件处理程序的全选/全不选复选框

问题背景 #

我通常用以下方式创建绑定模型的复选框：

@for (int i = 0; i < Model.checkLangs.Count; i++)
{
    <tr>
        <td>
            @Html.HiddenFor(m => m.checkLangs[i].Name)
            @Html.HiddenFor(m => m.checkLangs[i].LanguageId)
            @Html.CheckBoxFor(m => m.checkLangs[i].isChecked)
            <label>@Model.checkLangs[i].Name</label>
        </td>
    </tr>
}

这些复选框绑定到模型，点击提交按钮时能正常响应更改。现在需要一个不绑定任何模型的复选框，选中或取消时同步控制所有其他复选框的状态，思路是通过事件处理修改状态，再通过提交按钮完成后续操作，但不知道具体实现方法。

解决方案 #

1. 添加全选复选框 #

在现有复选框列表的表头位置（或列表上方）添加一个独立的全选框：

<tr>
    <td>
        <input type="checkbox" id="selectAll">
        <label for="selectAll">全选/取消全选</label>
    </td>
</tr>

2. 编写JavaScript同步逻辑 #

在页面的脚本区块（比如</body>前）添加以下代码，监听全选框的状态变化，同步所有绑定模型的复选框：

<script>
    // 获取全选框元素
    const selectAllCheckbox = document.getElementById('selectAll');
    
    // 绑定change事件
    selectAllCheckbox.addEventListener('change', function() {
        // 匹配所有由CheckBoxFor生成的复选框（name属性以checkLangs开头，以.isChecked结尾）
        const targetCheckboxes = document.querySelectorAll('input[name^="checkLangs"][name$=".isChecked"]');
        
        targetCheckboxes.forEach(checkbox => {
            // 同步复选框选中状态
            checkbox.checked = this.checked;
            
            // 同步对应的隐藏域（ASP.NET MVC的CheckBoxFor会生成隐藏域，确保未选中时提交false）
            const hiddenInput = checkbox.nextElementSibling;
            if (hiddenInput && hiddenInput.type === 'hidden') {
                hiddenInput.value = this.checked ? 'true' : 'false';
            }
        });
    });
</script>

3. 提交时的模型绑定验证 #

当点击提交按钮时，checkLangs集合中的isChecked属性会自动同步为全选框控制后的状态，完全兼容你原来的后端处理逻辑，不需要修改后端代码。

关键说明 #

• ASP.NET MVC的CheckBoxFor会生成两个输入控件：可见复选框和对应的隐藏域，目的是解决未选中复选框时不提交值的问题，所以必须同步修改隐藏域的值，否则模型绑定会出错。
• 选择器input[name^="checkLangs"][name$=".isChecked"]精准匹配目标复选框，不会影响页面上其他无关的复选框。

内容的提问来源于stack exchange，提问作者innom