如何获取表格复选框的值及对应行的问题ID（Asp.net MVC场景）

嘿，作为ASP.NET MVC新手遇到这个问题太正常了，别慌！咱们一步步来搞定它——核心思路就是通过脚本遍历表格里的复选框，同时抓取对应行的问题ID和复选框的选中状态。

第一步：先确认你的视图HTML结构 #

先假设你的视图表格是这样渲染的（如果你的结构略有不同，只需要调整脚本里的选择器就行）：

<table id="questionsTable">
    <thead>
        <tr>
            <th>问题内容</th>
            <th>是否标记</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var question in Model.QuestionList)
        {
            <tr>
                <td>@question.Content</td>
                <td>
                    <!-- 用data属性存储问题ID，这是最便捷的方式 -->
                    <input type="checkbox" class="question-checkbox" data-question-id="@question.Id" />
                </td>
            </tr>
        }
    </tbody>
</table>
<!-- 加个按钮触发数据获取操作 -->
<button id="get-status-btn">获取选中状态</button>

第二步：编写JavaScript脚本获取数据 #

这里给你两种常用的实现方式，选你熟悉的就行：

方式1：用jQuery（ASP.NET MVC项目通常默认引用了jQuery） #

$(document).ready(function() {
    $('#get-status-btn').click(function() {
        // 用来存储所有问题的状态数据
        let questionStatuses = [];

        // 遍历所有复选框
        $('.question-checkbox').each(function() {
            const $checkbox = $(this);
            // 从data属性取出问题ID
            const questionId = $checkbox.data('question-id');
            // 获取复选框的选中状态（true/false）
            const isChecked = $checkbox.is(':checked');

            // 把数据存到数组里
            questionStatuses.push({
                QuestionId: questionId,
                IsChecked: isChecked
            });
        });

        // 先在控制台打印看看数据是否正确（开发阶段调试用）
        console.log('问题状态数据：', questionStatuses);

        // 如果要提交到后端控制器，用AJAX发送
        $.ajax({
            url: '/YourController/UpdateQuestionStatus', // 替换成你的控制器和Action名称
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(questionStatuses),
            success: function(response) {
                alert('数据提交成功！');
            },
            error: function(xhr, status, error) {
                console.error('提交失败：', error);
            }
        });
    });
});

方式2：原生JavaScript（不需要依赖jQuery） #

如果你不想用jQuery，原生JS也能轻松实现：

document.addEventListener('DOMContentLoaded', function() {
    const submitBtn = document.getElementById('get-status-btn');
    submitBtn.addEventListener('click', function() {
        const questionStatuses = [];
        const checkboxes = document.querySelectorAll('.question-checkbox');

        checkboxes.forEach(checkbox => {
            // 从dataset属性获取问题ID
            const questionId = checkbox.dataset.questionId;
            // 直接取checked属性得到true/false
            const isChecked = checkbox.checked;

            questionStatuses.push({
                QuestionId: questionId,
                IsChecked: isChecked
            });
        });

        console.log('问题状态数据：', questionStatuses);

        // 用原生fetch提交到后端
        fetch('/YourController/UpdateQuestionStatus', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(questionStatuses)
        })
        .then(response => response.json())
        .then(data => alert('提交成功！'))
        .catch(error => console.error('提交失败：', error));
    });
});

第三步：后端控制器接收数据 #

最后，你需要在控制器里创建一个ViewModel来接收前端传过来的数据：

// 新建一个ViewModel类
public class QuestionStatusViewModel
{
    public int QuestionId { get; set; }
    public bool IsChecked { get; set; }
}

// 控制器里的Action方法
[HttpPost]
public ActionResult UpdateQuestionStatus(List<QuestionStatusViewModel> questionStatuses)
{
    // 这里就可以处理你拿到的数据了，比如保存到数据库
    foreach (var status in questionStatuses)
    {
        // 示例：根据QuestionId更新状态
        // var question = db.Questions.Find(status.QuestionId);
        // question.IsMarked = status.IsChecked;
        // db.SaveChanges();
    }

    return Json(new { Success = true });
}

一些小提示 #

• 如果你的问题ID不是存在data属性里，而是存在行内的隐藏输入框，那脚本里可以用checkbox.closest('tr').find('.question-id-hidden').val()来获取ID
• 开发时一定要先通过控制台打印数据，确认拿到的ID和选中状态是正确的，再提交到后端
• 确保你的控制器Action加上了[HttpPost]特性，并且路由地址和前端AJAX里的url一致

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