if语句逻辑异常：类按钮实现单选框全选/清空功能失效

先明确一个核心限制：单选框没法全选 #

单选框（<input type="radio">）的设计逻辑就是同一name属性组内只能有一个选项被选中，所以你想实现「全选所有单选框」根本不符合它的功能设定——这是第一个踩坑点。如果需要支持多选/全选，直接换成复选框（<input type="checkbox">）才是正确的选择。

逻辑反向的原因和修复方案 #

假设你是误将复选框写成了单选框，或者要操作的是不同name的单选框，那逻辑反向的问题可以通过以下方式修复：

1. 换用text().trim()判断按钮文本 #

$(this).html()会获取按钮内的所有HTML内容，如果文本周围有空格、换行甚至嵌套标签，=== 'Clear all'的判断就会不成立，直接走else分支，看起来逻辑就反了。改成用text().trim()获取纯文本并去除首尾空格：

$(document).ready(function() {
  $(".clearAllBtn").click(function() {
    const btnText = $(this).text().trim();
    if (btnText === 'Clear all') {
      $(".radioFit").prop('checked', false);
      $(this).text("Select all");
    } else {
      $(".radioFit").prop('checked', true);
      $(this).text("Clear all");
    }
  });
});

另外，jQuery支持直接给所有匹配元素批量设置prop，不需要写each()循环，代码更简洁。

2. 确认按钮的初始文本 #

如果按钮一开始显示的是Select all，第一次点击肯定会走else分支执行全选操作，你就会觉得逻辑反向。确保按钮的初始代码是：<button class="clearAllBtn">Clear all</button>。

3. 单选框的功能调整（如果必须用单选框） #

如果确实要使用单选框，那「全选」功能就别想了，可以改成「重置选中状态」或者「选中某个特定选项」。比如给每个单选框设置不同的name，批量设置checked: true时，每个name组的最后一个单选框会被选中，这是单选框的默认行为。

完整可用的复选框示例代码 #

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

<input type="checkbox" class="radioFit" value="1">选项1
<input type="checkbox" class="radioFit" value="2">选项2
<input type="checkbox" class="radioFit" value="3">选项3
<button class="clearAllBtn">Clear all</button>

<script>
$(document).ready(function() {
  $(".clearAllBtn").click(function() {
    const btnText = $(this).text().trim();
    if (btnText === 'Clear all') {
      $(".radioFit").prop('checked', false);
      $(this).text("Select all");
    } else {
      $(".radioFit").prop('checked', true);
      $(this).text("Clear all");
    }
  });
});
</script>

内容的提问来源于stack exchange，提问作者James