单击另一个按钮后，单选按钮保持选中状态

Question

我正在尝试设置一系列单选按钮，单击另一个按钮后将取消选中这些按钮，即一次只能选中一个。 我还根据已选择的单选按钮使单选按钮下方的文本区域出现或消失。 我的 html 是

<table id="tableId">
  <tbody>
    <tr>
      <td>
        <div id="selectTitle">
          Some Select
        </div>
        <select id="stuff">
          <option value="0">option 0</option>
          <option value="1">option 1</option>
          <option value="2">option 2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          Radio Options
        </div>
        <ul>
          <li>
            <input id="rad1" type="radio" /> rad1 </li>
          <li>
            <input id="rad2" type="radio" /> rad2 </li>
          <li>
            <input id="rad2" type="radio" /> rad3 </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <input id="textArea" type="textarea" />
      </td>
    </tr>
  </tbody>
</table>

我的 javascript 是

$("#rad1").click(function() {
  $("#rad2").prop("checked", false);
  $("#rad3").prop("checked", false);
  $("#textArea").hide();
});
$("#rad2").click(function() {
  $("#rad1").prop("checked", false);
  $("#rad3").prop("checked", false);
  $("#textArea").hide();
});
$("#rad3").click(function() {
  $("#rad1").prop("checked", false);
  $("#rad2").prop("checked", false);
  $("#textArea").show();
});

这是问题所在：

rad1 和 rad2 工作正常。 当您单击它们时，按钮会按预期从选中状态切换为未选中状态。 但是，当您单击 rad3 时，它会保持选中状态，并且在您刷新页面之前不会变为未选中状态。 我查看了这些案例，它们之间似乎没有什么不同。 这是我的代码的jsfiddle 。 任何帮助表示赞赏！

Answer 1

如果你给你的收音机输入相同的名字，它们会像你期望的那样工作：

<ul>
    <li><input id="rad1" name="rad" type="radio" /> rad1 </li>
    <li><input id="rad2" name="rad" type="radio" /> rad2 </li>
    <li><input id="rad3" name="rad" type="radio" /> rad3 </li>
</ul>

Answer 2

如果您想对单选按钮进行分组，它们都需要具有完全相同的name属性。 然后你会得到默认的行为。 从那里您可以应用单个change事件处理程序来根据所选值切换#textarea元素。

另请注意，您复制了无效的rad2 id，而且无线电输入也需要value属性。 试试这个：

 $('input[name="foo"]').change(function() { $('#textArea').toggle(this.value == '3'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><input id="rad1" type="radio" value="1" name="foo" />rad1</li> <li><input id="rad2" type="radio" value="2" name="foo" />rad2</li> <li><input id="rad3" type="radio" value="3" name="foo" checked="true" />rad3</li> </ul> <input id="textArea" type="textarea" />

Answer 3

您必须将name属性放在一个组中的所有收音机中。 您的 3 个收音机中的name应该相同。 像：

<input type="radio" name="radio" value="Val 1">
<input type="radio" name="radio" value="Val 2">

Answer 4

HTML 中的第 26 行有问题，您复制了 rad3 类型的 ID。

将 id 更改为 rad3 并且似乎按预期工作。