MVC中使用JavaScript获取CheckboxFor选中项的文本内容

问题原因 #

@Html.CheckBoxFor绑定的是isSelected布尔属性，生成的复选框默认value值就是true，所以用.val()拿到的自然是true，这是正常现象。你需要的是关联的towname文本，得从页面上的label或隐藏字段中获取。

修复步骤及代码 #

1. 先修复重复ID的问题 #

循环里给所有复选框设置了相同的id="chk2"，这会导致DOM ID重复（不符合规范），建议去掉手动设置的id，让MVC自动生成唯一ID：

@for (int i = 0; i < Model.TypeOfWorkClassificationCheckBoxes.Count; i++)
{
<td>
    @Html.CheckBoxFor(x => x.TypeOfWorkClassificationCheckBoxes[i].isSelected, new { @class = "classTest" })
    <label>@Model.TypeOfWorkClassificationCheckBoxes[i].towname</label>
    @Html.HiddenFor(x => x.TypeOfWorkClassificationCheckBoxes[i].towid)
    @Html.HiddenFor(x => x.TypeOfWorkClassificationCheckBoxes[i].towname)
</td>
}

2. 方法一：从相邻的label中获取显示文本 #

利用jQuery的DOM遍历方法，找到当前复选框旁边的label，提取文本：

$(document).ready(function () {
    $('.classTest').change(function (event) {
        if ($(this).is(':checked')) {
            // 获取相邻label的文本
            var displayText = $(this).next('label').text().trim();
            console.log(displayText);
            
            // 如需同时获取对应的towid和towname隐藏字段值
            var $td = $(this).closest('td');
            var towid = $td.find('input[name$="towid"]').val();
            var towname = $td.find('input[name$="towname"]').val();
            console.log(towid, towname);
        }
    });
});

3. 方法二：从对应的HiddenFor字段获取 #

页面已生成towname的隐藏字段，可通过父容器定位同单元格内的隐藏字段：

$(document).ready(function () {
    $('.classTest').change(function (event) {
        if ($(this).is(':checked')) {
            // 找到当前td下的towname隐藏字段
            var towname = $(this).closest('td').find('input[type="hidden"][name*="towname"]').val();
            console.log(towname);
        }
    });
});

补充说明 #

• 如果后续给label添加for属性关联复选框，也可以用$(this).siblings('label[for="' + this.id + '"]').text()来获取文本，当前代码用next()更直接。
• 避免硬编码的核心是利用DOM结构关联性（同td容器、相邻元素）定位目标元素，无需给每个元素写单独选择器。

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