如何实现复选框联动：取消勾选清空下方，重选恢复上方状态

没问题，我来帮你实现这个复选框的联动需求！根据你的描述，我们需要实现两个核心逻辑：

• 当取消勾选任意一个复选框时，它下方所有复选框自动取消勾选
• 当重新勾选这个复选框时，它上方所有复选框自动恢复勾选

下面结合你提供的Razor代码，给出具体的实现步骤：

步骤1：修改Razor视图代码 #

首先，给循环生成的每个复选框添加统一的类名和索引标识，方便后续JS定位元素：

@for (int i = 0; i < Model.transportDate.Count(); i++) {
    <tr>
        <td>
            @* 添加class和data-index属性，用于标识复选框位置 *@
            @Html.CheckBoxFor(Model => Model.transportDate[i].selection, new { 
                @class = "transport-checkbox", 
                data_index = i 
            })
        </td>
        <td>
            @Html.TextBoxFor(Model => Model.transportDate[i].Date)
        </td>
    </tr>
}

步骤2：添加JavaScript逻辑 #

你可以选择使用jQuery或者原生JavaScript来实现，两种方案都给你列出来：

方案A：jQuery实现（如果项目已引入jQuery） #

$(document).ready(function() {
    // 给所有复选框绑定状态改变事件
    $('.transport-checkbox').on('change', function() {
        const isChecked = $(this).is(':checked');
        const currentIndex = parseInt($(this).data('index'));
        const allCheckboxes = $('.transport-checkbox');

        if (!isChecked) {
            // 取消勾选时，遍历当前复选框之后的所有项，设置为未勾选
            for (let i = currentIndex + 1; i < allCheckboxes.length; i++) {
                $(allCheckboxes[i]).prop('checked', false);
            }
        } else {
            // 重新勾选时，遍历当前复选框之前的所有项，设置为勾选
            for (let i = 0; i < currentIndex; i++) {
                $(allCheckboxes[i]).prop('checked', true);
            }
        }
    });
});

方案B：原生JavaScript实现（无需依赖库） #

document.addEventListener('DOMContentLoaded', function() {
    const allCheckboxes = document.querySelectorAll('.transport-checkbox');
    
    allCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const isChecked = this.checked;
            const currentIndex = parseInt(this.dataset.index);
            
            if (!isChecked) {
                // 取消当前之后的所有复选框
                for (let i = currentIndex + 1; i < allCheckboxes.length; i++) {
                    allCheckboxes[i].checked = false;
                }
            } else {
                // 恢复当前之前的所有复选框
                for (let i = 0; i < currentIndex; i++) {
                    allCheckboxes[i].checked = true;
                }
            }
        });
    });
});

逻辑说明 #

• 我们通过data-index属性记录每个复选框在列表中的位置，这样就能准确找到它的前后项
• 当复选框状态改变时：
  • 如果是取消勾选，就循环它之后的所有复选框，把它们的checked属性设为false
  • 如果是重新勾选，就循环它之前的所有复选框，把它们的checked属性设为true

这样就能完美实现你需要的联动效果啦！

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