Question

我有一个带有单选框列的表（“是” /“否”）。

面临的挑战是创建一个按钮，该按钮将根据单击时它们具有的值将所有单选框切换为“是”或“否”。

如何将不同组的广播盒彼此连接？我之前已经做过类似的任务，但是有复选框。使用它们，您只需在checked, true和checked, false之间切换。

我遇到了这个答案：Jquery function to toggle all radio buttons on the page as，但是它们有两个按钮，而我只有一个。

这是我的代码示例：

$('.select-deselect-all').on('click', function() {
  var radios = $('tbody.table-body').find('input[type=radio]')
  $(radios).each(function() {
$(this).hasClass('checked') ? $(this).prop('checked', true) : $(this).prop('checked', false)
  })

<button type="button" class="btn select-deselect-all">
				Select/deselect all
</button>
<br>	
<table id="articles_table" class="table no-highlight">
  <thead>
    <tr>
      <th>Article number</th>
      <th>Description</th>
      <th>Commodity code</th>
      <th class="table-radio-column">Request Supplier Declaration?</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="article-number">1</td>
      <td>2</td>
      <td>3</td>
      <td class="table-radio-column">
        <div>
          <input type="radio" id="1_YES" class="request-article-choice" name="1" value="Yes" checked>
          <label for='1_YES'>Yes</label>

          <input type="radio" id="1_NO" class="request-article-choice ml-20" name="1" value="No">
          <label for='1_NO' class="ml-20">No</label>
        </div>
      </td>
    </tr>
    <tr>
      <td class="article-number">1</td>
      <td>2</td>
      <td>3</td>
      <td class="table-radio-column">
        <div>
          <input type="radio" id="2_YES" class="request-article-choice" name="2" value="Yes" checked>
          <label for='2_YES'>Yes</label>

          <input type="radio" id="2_NO" class="request-article-choice ml-20" name="2" value="No">
          <label for='2_NO' class="ml-20">No</label>
        </div>
      </td>
    </tr>
    <tr>
      <td class="article-number">1</td>
      <td>2</td>
      <td>3</td>
      <td class="table-radio-column">
        <div>
          <input type="radio" id="3_YES" class="request-article-choice" name="3" value="Yes" checked>
          <label for='3_YES'>Yes</label>

          <input type="radio" id="3_NO" class="request-article-choice ml-20" name="3" value="No">
          <label for='3_NO' class="ml-20">No</label>
        </div>
      </td>
    </tr>
  </tbody>
</table>

更新

使用以下代码可以正常工作：

$('.select-deselect-all').on('click', function() {
  $('td input[type=radio]').each(function() {  
    if($(this).prop('checked') || $(this).attr('checked')) {
       $(this).prop('checked', false);
       $(this).attr('checked', false);
    } else {
        $(this).prop('checked', true);
       $(this).attr('checked', true);
    }
  })
})

但是，当您只阅读一篇或两篇文章并随后多次按“选择/取消选择”按钮时，就会出现错误。收音机框出现这种行为的原因可能是什么？ 有人知道如何处理单选按钮吗？

Answer 1

要获得预期结果，请使用以下使用prop和attr的选项进行选中和取消选中

使用.each方法环绕所有单选按钮
同时检查prop('checked')和attr('checked')进行检查，因为使用它们之一只能工作一次，而其他时候则失败
同时使用prop()和attr()选中和取消选中单选按钮

prop和attr不能切换单选按钮，
请参阅此链接-https://ux.stackexchange.com/questions/13511/why-is-it-impossible-to-deselect-html-radio-inputs，以了解更多详细信息和单选按钮的默认行为

$('.select-deselect-all').on('click', function() {
  $('td input[type=radio]').each(function() {  
    if($(this).prop('checked') || $(this).attr('checked')) {
       $(this).prop('checked', false);
       $(this).attr('checked', false);
    } else {
        $(this).prop('checked', true);
       $(this).attr('checked', true);
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="btn select-deselect-all">
				Select/deselect all
</button>
<br>	
<table id="articles_table" class="table no-highlight">
  <thead>
    <tr>
      <th>Article number</th>
      <th>Description</th>
      <th>Commodity code</th>
      <th class="table-radio-column">Request Supplier Declaration?</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="article-number">1</td>
      <td>2</td>
      <td>3</td>
      <td class="table-radio-column">
        <div>
          <input type="radio" id="1_YES" class="request-article-choice" name="1" value="Yes" checked>
          <label for='1_YES'>Yes</label>

          <input type="radio" id="1_NO" class="request-article-choice ml-20" name="1" value="No">
          <label for='1_NO' class="ml-20">No</label>
        </div>
      </td>
    </tr>
    <tr>
      <td class="article-number">1</td>
      <td>2</td>
      <td>3</td>
      <td class="table-radio-column">
        <div>
          <input type="radio" id="2_YES" class="request-article-choice" name="2" value="Yes" checked>
          <label for='2_YES'>Yes</label>

          <input type="radio" id="2_NO" class="request-article-choice ml-20" name="2" value="No">
          <label for='2_NO' class="ml-20">No</label>
        </div>
      </td>
    </tr>
    <tr>
      <td class="article-number">1</td>
      <td>2</td>
      <td>3</td>
      <td class="table-radio-column">
        <div>
          <input type="radio" id="3_YES" class="request-article-choice" name="3" value="Yes" checked>
          <label for='3_YES'>Yes</label>

          <input type="radio" id="3_NO" class="request-article-choice ml-20" name="3" value="No">
          <label for='3_NO' class="ml-20">No</label>
        </div>
      </td>
    </tr>
  </tbody>
</table>

codepen-https://codepen.io/nagasai/pen/ewxKxQ?editors=1010

Answer 2

我找到了解决此问题的方法（此功能可在两个单选按钮之间相互切换）：

$('.select-deselect-all').on('click', function() {
    var radio = $('input[type="radio"]:checked').first().val();
    $('input[type="radio"]').each(function() {
        if ($(this).val() !== radio) {
            $(this).click();
        }
    });
});

Answer 3

您几乎了解了这一点：遍历table-radio-columns，而不是每个单选按钮，然后遍历其中的每个单选按钮。然后只需将选中的一项切换为未选中，将未选中的一项切换为选中即可。请注意，这里的值并不重要：这些列中的每一列都有两个单选按钮，其中一个将被选中，而其中一个将未被选中，因此您只需要切换它们即可。

自从我使用jQuery已有很长时间了，但是可能的伪代码解决方案（我认为草绘的方法是正确的，但是正如我所说的，已经有一段时间了，因此使用jQuery API可能会有一个更紧凑/更好的解决方案我忘了）：

$(columns).each(column => {
  $(radios).each(radio => {
    radio.toggleClass('checked')
    radio.hasClass('checked') ? radio.prop('checked', true) : radio.prop('checked', false)
  })
})

单击按钮后如何切换所有单选框？

3 个答案: