如何在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?

本文关键字：何时会 表单 HTML 创建 两组 单选按钮      更新时间：2023-09-26

我需要创建两个带有单选按钮的表单，如下所示，然后，当更改选中时，我需要在第二个表单(jquery或javascript)中自动更改:

<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属性值来对它们进行分组，然后只需添加一个事件侦听器来侦听更改。

下面是一个例子。

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>

编辑:更改HTML和JS。你只需要把类添加到Radiobuttons。经过Firefox, Chrome和IE 11的测试。也许它不工作，因为jquery没有加载?如果你在Javascript-Part中添加了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:我决定使用click event。

function bodyLoad () {
$("input:radio").click(function() {
       var myClass = $(this).attr("class");
       $("input:radio").prop('checked',false);
       $("." + myClass).prop('checked',true);
});}
相关文章：