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属性。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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，似乎按预期工作。

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

4 个答案: