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>

实施可切换其他单选按钮的单选按钮

1 个答案: