ASP.NET MVC表单中如何实现批量切换单选按钮的主单选按钮？

这个需求很常见，用前端JavaScript就能完美解决，我给你分步骤拆解一下：

1. 添加主单选按钮组 #

首先在表单顶部插入一个批量控制的单选按钮组，和子项的状态选项保持一致，方便用户统一选择：

<div class="batch-control">
    <strong>批量设置所有状态：</strong>
    @foreach (var status in statusList)
    {
        <label style="margin-right: 15px;">
            <input type="radio" class="master-status-radio" name="masterStatus" value="@status" />
            @status <!-- 这里可以替换成状态对应的文字描述，比如"已完成"/"待处理" -->
        </label>
    }
</div>

这里给主按钮加了master-status-radio类，方便后续JS定位；name="masterStatus"确保它们是同一组（只能选一个）。

2. 编写批量切换的JavaScript逻辑 #

根据你项目的技术栈，我提供两种实现方案：

原生JS版本（无依赖） #

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有主单选按钮
    const masterRadios = document.querySelectorAll('.master-status-radio');
    
    masterRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (!this.checked) return;
            
            const targetStatus = this.value;
            // 匹配所有子项的单选按钮（name格式是batch.Items[索引].ItemAssignedStatus）
            const childRadios = document.querySelectorAll('input[type="radio"][name^="batch.Items["][name$="].ItemAssignedStatus"]');
            
            // 按name分组（每个Item对应一组单选按钮）
            const radioGroups = {};
            childRadios.forEach(radio => {
                radioGroups[radio.name] = radioGroups[radio.name] || [];
                radioGroups[radio.name].push(radio);
            });
            
            // 遍历每组，选中对应状态的按钮
            Object.values(radioGroups).forEach(group => {
                group.forEach(radio => {
                    radio.checked = (radio.value === targetStatus);
                    // 可选：触发change事件，确保表单验证/绑定逻辑生效
                    radio.dispatchEvent(new Event('change'));
                });
            });
        });
    });
});

jQuery版本（如果项目已引入jQuery） #

$(document).ready(function() {
    $('.master-status-radio').on('change', function() {
        if (!$(this).is(':checked')) return;
        
        const targetStatus = $(this).val();
        // 遍历所有子单选按钮组，选中对应状态的选项
        $('input[type="radio"][name^="batch.Items["][name$="].ItemAssignedStatus"]').each(function() {
            const groupName = $(this).attr('name');
            $(`input[type="radio"][name="${groupName}"][value="${targetStatus}"]`)
                .prop('checked', true)
                .trigger('change'); // 触发事件确保表单逻辑同步
        });
    });
});

关键注意点 #

• 确保statusList中的状态值和子单选按钮的value完全一致（数字/字符串类型要匹配），否则无法正确选中。
• 如果状态有对应的友好名称（比如Status=1对应“已处理”），可以把主按钮label里的@status替换成名称，提升用户体验。
• 代码中触发的change事件是可选的，如果你的表单有验证或其他依赖单选按钮状态的逻辑，建议保留。

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