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

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

我找到了解决这个问题的方法（这个函数在彼此之间切换 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 2

为了达到预期的效果，请使用下面的选项使用 prop 和 attr 来检查和取消检查

1. 使用 .each 方法循环所有单选按钮
2. 检查 prop('checked') 和 attr('checked') 是否已检查，因为使用其中任何一个都只能工作一次，其他时候会失败
3. 使用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 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)
  })
})