如何获取已勾选且data属性值为True的表格复选框值列表

我来帮你一步步实现需求，分前端JavaScript逻辑和后端视图模型映射两部分说明：

一、前端：获取符合条件的复选框值 #

你需要筛选已勾选且data-editable属性值为"True"的复选框，收集它们的value属性值。这里提供两种常见实现方式：

1. 原生JavaScript写法 #

// 选择所有符合条件的复选框
const eligibleCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked[data-editable="True"]');

// 将NodeList转换为数组，提取value值
const selectedValues = Array.from(eligibleCheckboxes).map(checkbox => checkbox.value);

// 结果就是你需要的目标列表
console.log(selectedValues);

2. jQuery写法（如果项目使用jQuery） #

// 筛选并收集符合条件的复选框值
const selectedValues = $('input[type="checkbox"]:checked[data-editable="True"]').map(function() {
    return $(this).val();
}).get();

console.log(selectedValues);

二、后端：将视图模型字段映射到复选框的data属性 #

你的视图模型里有public bool ShortageIsEditable {get;set;}字段，需要在渲染视图时把这个值绑定到复选框的data-editable属性上。以ASP.NET Razor视图为例：

1. 使用HtmlHelper的写法 #

@foreach (var item in Model.YourDataSet)
{
    <div>
        @Html.CheckBoxFor(m => item.IsSelected, new { 
            data_editable = Model.ShortageIsEditable.ToString(),
            value = item.RecordId // 替换为你的记录ID或业务对应值
        })
        <span>@item.RecordName</span>
    </div>
}

2. 原生HTML写法 #

@foreach (var item in Model.YourDataSet)
{
    <div>
        <input 
            type="checkbox" 
            name="IsSelected" 
            value="@item.RecordId"
            data-editable="@Model.ShortageIsEditable"
        />
        <span>@item.RecordName</span>
    </div>
}

这里注意：ShortageIsEditable是bool类型，在Razor视图中直接输出会自动转为"True"或"False"，刚好匹配你需要的data属性值格式。

关键说明 #

• 前端选择器:checked确保只选中已勾选的复选框，[data-editable="True"]精准筛选出具备编辑权限的项；
• 后端通过视图模型的ShortageIsEditable字段控制前端复选框的可编辑标识，实现权限逻辑的前后端统一。

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