如何实现非单选按钮的<a>标签单选功能（附现有代码）

我来帮你搞定这个单选切换的问题！你现在的代码是每个按钮独立切换图标，所以会出现多个按钮同时处于"选中"状态的情况。要实现类似单选按钮的效果，核心思路就是点击某一个按钮时，先把所有其他按钮恢复到初始图标状态，再切换当前按钮的图标。

下面是修改后的完整代码，我还优化了JS逻辑，让代码更易维护：

HTML 部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
  <!-- 添加data属性存储初始和切换的图标类 -->
  <a class="icon-btn" data-original="fa-thumbs-o-up" data-toggle="fa-thumbs-o-down">
    <i class="fa fa-thumbs-o-up"></i>
  </a>
  <a class="icon-btn" data-original="fa-smile-o" data-toggle="fa-frown-o">
    <i class="fa fa-smile-o"></i>
  </a>
  <a class="icon-btn" data-original="fa-unlock" data-toggle="fa-unlock-alt">
    <i class="fa fa-unlock"></i>
  </a>
</div>

CSS 部分（优化交互体验） #

.fa { 
  font-size: 58px !important; 
  cursor: pointer; /* 加上鼠标指针，提示可点击 */
}
.icon-btn {
  margin: 0 10px; /* 给按钮加间距，更美观 */
}

JavaScript 部分 #

$(document).ready(function(){
  // 统一绑定所有图标按钮的点击事件
  $(".icon-btn").click(function() {
    const $currentBtn = $(this);
    const $currentIcon = $currentBtn.find("i");
    
    // 1. 先重置所有其他按钮到初始图标状态
    $(".icon-btn").not($currentBtn).each(function() {
      const $icon = $(this).find("i");
      const originalIcon = $(this).data("original");
      // 移除切换类，添加初始类
      $icon.removeClass($(this).data("toggle")).addClass(originalIcon);
    });
    
    // 2. 切换当前按钮的图标状态
    $currentIcon.toggleClass($currentBtn.data("original") + " " + $currentBtn.data("toggle"));
  });
});

关键改动说明： #

• 统一按钮类名：把原来的btn1/btn2/btn3改成通用的icon-btn，方便统一绑定事件，后续新增按钮也不用改JS
• 自定义数据属性：用data-original和data-toggle存储每个按钮的初始图标和切换图标，不用在JS里硬编码类名，扩展性更强
• 重置其他按钮：点击时先遍历所有非当前按钮，把它们的图标恢复成初始状态，确保同一时间只有当前按钮可以处于切换后的状态
• 优化交互体验：给图标加了鼠标指针样式，给按钮加了间距，让用户更容易识别可点击元素

这样修改后，你点击任意一个图标按钮，其他按钮都会自动恢复到初始状态，完美解决提交时分数值不匹配的问题！

内容的提问来源于stack exchange，提问作者Don't Be negative