一个表单有两个单选框怎么办？这两个动一个另一个也跟着动，但是这两个是控制两个完全独立的数据
没太明白 “这两个动一个另一个也跟着动”这个是什么意思？状态1开，则状态2变为关闭？状态1关闭则状态2变为开。反过操作状态也是一样的过程，互斥操作？ 如果是上面所说的，那么状态2应该设置为关闭的，现在2个都是开了。用下面的代码 ``` window.onload = function () { let as = document.getElementsByName("a"); let bs = document.getElementsByName("b"); Array.from(as).concat(Array.from(bs)).forEach(el => { el.onclick = function () { let target = this.name == 'a' ? bs : as; target[this.value == 'off' ? 1 : 0].checked = true; } }); as[0].onclick();//执行一次代码实现斥 } ```
以下回答结合了ChatGPT：
要解决这个问题，您需要确保两个单选框具有不同的名称（即name属性），这将使它们彼此独立。此外，您需要使用JavaScript代码，以便在更改一个单选框时更新另一个单选框的状态。下面是一个示例代码：
<form action="#" method="post">
<div class="form-group">
<label class="col-xs-12">状态1</label>
<div class="col-xs-12">
<label class="radio-inline" for="example-inline-radio1">
<input type="radio" name="a" value="off" checked>开
</label>
<label class="radio-inline" for="example-inline-radio2">
<input type="radio" name="a" value="on">关
</label>
</div>
</div>
<div class="form-group">
<label class="col-xs-12">状态2</label>
<div class="example-box">
<label class="radio-inline" for="example-inline-radio3">
<input type="radio" id="example-inline-radio3" name="b" value="on" checked>开
</label>
<label class="radio-inline" for="example-inline-radio4">
<input type="radio" id="example-inline-radio4" name="b" value="off">关
</label>
</div>
</div>
</form>
<script>
const radioA = document.getElementsByName("a");
const radioB = document.getElementsByName("b");
// 添加事件监听器以在单选框更改时更新另一个单选框的状态
radioA.forEach((radio) => {
radio.addEventListener("change", () => {
if (radio.value === "on") {
radioB[0].checked = true;
} else {
radioB[1].checked = true;
}
});
});
radioB.forEach((radio) => {
radio.addEventListener("change", () => {
if (radio.value === "on") {
radioA[1].checked = true;
} else {
radioA[0].checked = true;
}
});
});
</script>
这里使用JavaScript代码来获取单选框元素并添加事件监听器，以便在更改一个单选框时更新另一个单选框的状态。在这个例子中，当用户在第一个单选框中选择“关”时，第二个单选框中的“关”选项将被选中，反之亦然。