如何在 HTML 表单中创建两组单选按钮以及 A 组中的更改何时会在 B 组中更改？
Posted
技术标签:
【中文标题】如何在 HTML 表单中创建两组单选按钮以及 A 组中的更改何时会在 B 组中更改？【英文标题】：How can I create two groups of radio buttons in a HTML form and when change in A Group will change in B Group? 【发布时间】：2017-02-09 00:26:52 【问题描述】：我需要创建两个带有如下单选按钮的表单，然后，当检查更改时，我需要在第二个表单（jquery 或 javacript）中自动更改：
<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>
【问题讨论】：
您的意思是说，如果name_a 以form_a 形式签入，那么它也应该签入form_b 以及Yes 等相同的值类型？
是的，当检查name-a inf form-a 检查name-c in form_b 和检查name-b in form-a 时检查name-d in form_b
【参考方案1】：
只需更改单选按钮上的name 属性值即可对它们进行分组，然后只需添加一个事件侦听器来侦听更改。
这是一个例子。
var radioBtns = document.querySelectorAll("input[type=radio]");
function radioChangeHndl(evt)
radioBtns.forEach(function(radioBtn)
radioBtn.checked = '';
if(radioBtn.value === this.value)
radioBtn.checked = 'true'
.bind(this))
radioBtns.forEach(function(radioBtn)
radioBtn.addEventListener('change', radioChangeHndl);
);<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>【讨论】：
我无法更改名称值，因为它是一种将值发送到 mailchimp 表单的表单。我只能“添加类”....如果此解决方案适用于类，我可以尝试，但实际代码对我不起作用:(codepen.io/uzielweb/pen/gwxqyr 这不是我在 codepen 中的代码示例。您还需要单选按钮上的checked 属性吗？
我已使用您发布的完全相同的 html 对我的答案进行了更新。
对不起----我的错误:)当我使用Jquery脚本加载时有效:)
这个脚本现在重新编辑。我正在使用带有 document.ready 功能的 Jquery :) 。谢谢！【参考方案2】：
编辑：更改了 HTML 和 JS。知道您只需将类添加到单选按钮。使用 Firefox、Chrome 和 IE 11 进行测试。可能因为未加载 jquery 而无法正常工作？如果您在 javascript 部分中添加 jquery，它的工作原理。
我的解决方案是双向的。点击form-a和form-b
HTML: 我更改了分组的按钮名称。 JQuery 选择器是我添加的类名。
<body onload="bodyLoad()">
<form id="form-a" name="form-a">
<input type="radio" class="radioA" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" class="radioA" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-d" id="id-d" value="No" />
</form>
JS： 我决定使用点击事件。
function bodyLoad ()
$("input:radio").click(function()
var myClass = $(this).attr("class");
$("input:radio").prop('checked',false);
$("." + myClass).prop('checked',true);
);
【讨论】：
以上是关于如何在 HTML 表单中创建两组单选按钮以及 A 组中的更改何时会在 B 组中更改？的主要内容，如果未能解决你的问题，请参考以下文章