实现一个单选按钮来切换其他单选按钮

Question

我正在处理的当前项目涉及一个表格，该表格使用带有项目列表的模型。

public class BatchModel
{
    public int Id { get; set; 
    public List<Item> Items { get; set; } 
}

public class Item
{
    public int Id { get; set; }
    public int Status { get; set; }
}

我使用单选按钮更新表单中的状态：

// declare some list of assignable statuses, statusList

// create radio button for each object
for(int i = 0; i < batch.Items.Count; i++)
{
    @Html.HiddenFor(j => batch.Items[i].IdInventory, batch.Items[i].IdInventory);
    @foreach (var status in statusList)
    {
        <td>@Html.RadioButtonFor(j => batch.Items[i].ItemAssignedStatus, status)</td>
    }
}

我还要在表单顶部有一个“主”单选按钮，该按钮可将表单中的所有单选按钮切换为给定值。 我该如何实现？

Answer 1

这是仅使用JS和HTML的简化示例。 我认为这将帮助您根据需要构建生成的代码。

 function toggleit(element) { let value = element.value; let inputs = document.querySelectorAll(".toggleit[value='" + value + "']"); for(var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } 

 <div>Master <input type="radio" name="master" value="on" id="master_on" onchange="toggleit(this)" /> <label for="master_on">On</label> <input type="radio" name="master" value="off" id="master_off" onchange="toggleit(this)" /> <label for="master_off">Off</label> </div> <div> <div>Foo <input type="radio" name="foo" value="on" id="foo_on" class="toggleit" /> <label for="foo_on">On</label> <input type="radio" name="foo" value="off" id="foo_off" class="toggleit" /> <label for="foo_off">Off</label> </div> <div>Bar <input type="radio" name="bar" value="on" id="bar_on" class="toggleit" /> <label for="bar_on">On</label> <input type="radio" name="bar" value="off" id="bar_off" class="toggleit" /> <label for="bar_off">Off</label> </div> </div>