如何在客户端实现ASP.NET Grid表头复选框全选功能？

问题出在ASP.NET的CheckBox控件渲染后，你设置的CssClass="checkbox-item"是添加到了包裹<input>的<span>标签上，而非复选框本身。直接使用$('.checkbox-item')获取到的是span元素，设置它的checked属性自然不会生效。

正确实现方式 #

1. 基础版全选/取消全选函数

function toggleSelectAll() {
    // 获取表头复选框的选中状态
    var isChecked = $('.checkbox-select-all input').prop('checked');
    // 选中所有行内的复选框（通过span的class定位内部input）
    $('.checkbox-item input').prop('checked', isChecked);
}

2. 精准版（限定当前Grid范围）

如果页面存在多个Grid，建议通过表头复选框定位到所属Grid，避免影响其他区域的复选框：

function toggleSelectAll() {
    // 获取触发事件的表头复选框
    var selectAllBox = event.target;
    // 向上查找所属的Grid表格容器
    var targetGrid = $(selectAllBox).closest('table');
    // 获取当前选中状态
    var isChecked = $(selectAllBox).prop('checked');
    // 仅操作当前Grid内的行复选框
    targetGrid.find('.checkbox-item input').prop('checked', isChecked);
}

原方法无效的原因 #

从你提供的渲染后HTML可以看到：

<span class="checkbox-item">
    <input id="..." type="checkbox" name="...">
</span>

checkbox-item是span标签的类，而非复选框input的类。因此$('.checkbox-item')选中的是span容器，不是实际的复选框元素。必须通过后代选择器$('.checkbox-item input')定位到input，再用prop('checked', ...)设置选中状态（优先用prop而非attr，因为checked是DOM元素的原生属性）。

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