c# - 实现一个单选按钮来切换其他单选按钮
问题描述
我正在处理的当前项目涉及一个表单,该表单使用带有项目列表的模型。
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>
}
}
我还想在表单顶部有一个“主”单选按钮,将表单中的所有单选按钮切换到给定值;我怎样才能做到这一点?
解决方案
这是一个仅使用 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>
推荐阅读
- python - FFMPEG concat 在剪辑之间留下音频间隙
- css - 使用 CSS 根据用户屏幕大小隐藏 Shopify 部分
- python - Jupyter 笔记本中未显示的绘图
- javascript - 带有复选框的 Javascript 电子邮件 ID 验证
- git - 获取以前的分支名称
- wordpress - 与 .htaccess 配置不同的网站重定向
- php - 是否可以确定网站是否已编码?
- c++ - 未初始化和复制的指针变量的地址
- python - Python:如何以混合格式解析日期?
- sql - SQL查询;返回主表的所有记录,并在条件下从连接表中添加字段;在连接表中找不到匹配项时将值留空