表单中的单选按钮可以用于选择同一表单中的另一个单选按钮吗？答案

【问题标题】：Can a radio button in a form be used to select another radio button in the same form?表单中的单选按钮可以用于选择同一表单中的另一个单选按钮吗？
【发布时间】：2021-12-14 17:26:21
【问题描述】：

我有一个包含 2 组单选按钮的 HTML 表单。我需要第一组也更改第二组的选择，即

第 1 组有选项 A 和 B，第 2 组有选项 C 和 D；当我选择 A 时，我需要表单也选择 C；当我选择 B 时，我需要表单也选择 D。我需要在页面加载时默认选择 A & C。 A & C 将永远配对； B & D 将永远配对。

我知道这听起来不切实际，但原因是此表单正在将其响应发送到我无法编辑字段的另一个提供商的表单。他们有效地以他们的形式得到了一个重复的问题（相同的问题只是措辞略有不同），我不希望我的用户必须两次回答相同的问题，所以我希望隐藏 C&D 的按钮。 .

每个组上的“名称”不同，每个单选按钮的“值”和“id”都是唯一的。

这可以吗？欢迎使用 JQuery 和 JS 解决方案。



<label for="buyer-select">
    <div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>

<label for="agent-select">
    <div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
            
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">

<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">

【问题讨论】：

是的，这可以做到。你在实现它时遇到了什么问题？
如果您要隐藏第二组单选按钮，为什么不直接用隐藏的输入替换它们呢？然后只需将隐藏输入的值设置为对应的单选按钮值即可。
还提供一些您迄今为止尝试过或产生问题所需的代码
我已经更新了我的问题以包含一些代码。我对 HTML 和 CSS 没问题，但是 JS 和 Jquery 对我来说是新的，所以我有点迷茫。 @Barmar - 两个组之间的单选按钮值不匹配，因此我无法在隐藏字段中重用该值。
你需要发布试图解决问题的JS代码，而不仅仅是HTML。

标签： javascript html jquery forms

【解决方案1】：

只需设置相应按钮的checked属性即可。

document.getElementById("buyer").checked = true;
document.getElementById("buyer-select").addEventListener("click", function() {
  document.getElementById("buyer").checked = true;
});

document.getElementById("agent-select").addEventListener("click", function() {
  document.getElementById("agent").checked = true;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
    <div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>

<label for="agent-select">
    <div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">

<br>

<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">

<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">

您还可以将第二组单选按钮替换为单个隐藏输入。将单选按钮发送的值放入隐藏输入的值中。

document.getElementById("buyer-select").addEventListener("click", function() {
  document.getElementById("buyer-agent").value = "false";
});

document.getElementById("agent-select").addEventListener("click", function() {
  document.getElementById("buyer-agent").value = "true";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
    <div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>

<label for="agent-select">
    <div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">

<input type="hidden" name="agent" id="buyer-agent" value="false">

【讨论】：

这几乎正是我所需要的——谢谢！我只有一个问题：当页面加载时，第一个“买家”选项启用了“选中”状态，但没有为第二个选项选择任何内容。它要求用户点击第一个“买家”选项。我需要默认设置两个“买方”选项，然后如果单击“代理”则可以更改。
只需在 JavaScript 中设置其.checked 属性，与在函数中完成的方式相同。

【解决方案2】：

这是你想要的吗：

如果是，试试这个代码：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    $('input[type=radio][name="pet"]').change(function() {
    var $radiobutton = $("input[value='"+$(this).val()+"']");
    $radiobutton.prop("checked", true);
    });
    $('input[type=radio][name="pet2"]').change(function() {
    var $radiobutton = $("input[value='"+$(this).val()+"']");
    $radiobutton.prop("checked", true);
    });
  }, false);
</script>
</head>

<h2>Select a Pet</h2>
<div>
  <input name="pet" type="radio" value="dog" /><span>Dog</span>
  <input name="pet" type="radio" value="cat" /><span>Cat</span>
  <input name="pet" type="radio" value="fish" /><span>Fish</span>
</div>
<div>
  <input name="pet2" type="radio" value="dog" /><span>Dog</span>
  <input name="pet2" type="radio" value="cat" /><span>Cat</span>
  <input name="pet2" type="radio" value="fish" /><span>Fish</span>
</div>

【讨论】：

堆栈 sn-p 会比图像更好。
感谢@Joshua，但该解决方案取决于第一组和第二组的值是否相同 - 我的不匹配。