Question

我有一个表单，向用户显示单选按钮列表。还可以选择某列中的所有按钮。选择在第一次工作正常，但是当我想在两者之间来回切换时，它会中断。

如何只需点击一下即可选择单个列中的所有单选按钮？

function checkAll(e) {
  if (e.hasClass('allFirst')) {
    $('.first').attr('checked', 'checked');
  } else {
    $('.second').attr('checked', 'checked');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="radio" name="A" class="first" />1</td>
    <td>
      <input type="radio" name="A" class="second" />2</td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="B" class="first" />1</td>
    <td>
      <input type="radio" name="B" class="second" />2</td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="C" class="first" />1</td>
    <td>
      <input type="radio" name="C" class="second" />2</td>
  </tr>
</table>
<input type="radio" name="all" class="allFirst" onclick="checkAll($(this));" />Select All #1
<input type="radio" name="all" class="allSecond" onclick="checkAll($(this));" />Select All #2

如果您“全选＃1”，然后“全选＃2”，再选择“全选＃1”，第三次尝试将不会检查单选按钮。

https://jsfiddle.net/jb7gfev9/

Answer 1

尝试将 attr 更改为 prop 。

有关详细信息，请参阅this question。

Answer 2

您需要使用jquery .prop()而不是.attr()

function checkAll(e) {
  if (e.hasClass('allFirst'))
    $('.first').prop('checked', true);
  else
    $('.second').prop('checked', true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="radio" name="A" class="first" />1</td>
    <td>
      <input type="radio" name="A" class="second" />2</td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="B" class="first" />1</td>
    <td>
      <input type="radio" name="B" class="second" />2</td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="C" class="first" />1</td>
    <td>
      <input type="radio" name="C" class="second" />2</td>
  </tr>
</table>
<input type="radio" name="all" class="allFirst" onclick="checkAll($(this));" />Select All #1
<input type="radio" name="all" class="allSecond" onclick="checkAll($(this));" />Select All #2

Answer 3

只是为Mohammad的答案添加一些上下文，在这种情况下.attr（）适用于默认状态，而.prop（）适用于DOM树的当前状态，因此它在切换时的值这里。在用户可以更新属性值的情况下，您将要使用.prop（）来获取当前值。

使用“全选”选项

3 个答案: