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

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

如果你给你的 radio 输入相同的名字，它们会像你预期的那样工作:

<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>