如何通过JQuery使Checkbox实现Radio Button的单选功能？

问题背景 #

我需要让一组用自定义图标替代原生样式的复选框实现类似单选按钮的互斥选择效果，但最初的jQuery脚本只能单独切换单个选项的激活状态，无法实现单选逻辑。每个选项都包裹在带有data-toggle="wizard-checkbox"的.choice容器中，内部包含隐藏的原生复选框和自定义图标。

初始代码（无法实现单选） #

$('[data-toggle="wizard-checkbox"]').click(function(){ 
  if( $(this).hasClass('active')){ 
    $(this).removeClass('active'); 
    $(this).find('[type="checkbox"]').removeAttr('checked'); 
  } else { 
    $(this).addClass('active'); 
    $(this).find('[type="checkbox"]').attr('checked','true'); 
  } 
});

完整HTML结构 #

<div class="tab-pane" id="sectiune">
  <h4 class="info-text">请选择您当前的组别</h4>
  <div class="row">
    <div class="form-group">
      <div class="col-sm-12 col-sm-offset">
        <div class="col-sm-3 col-sm-offset">
          <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Solo">
            <input type="checkbox" id="solo" name="sectiuni" value="Solo">
            <div class="icon">
              <img src="assets/img/icons/solo.svg"/>
            </div>
            <h6>Solo</h6>
          </div>
        </div>
        <div class="col-sm-3 col-sm-offset">
          <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Duo/Trio/Quartet">
            <input type="checkbox" id="duo" name="sectiuni" value="Duo/Trio/Quartet">
            <div class="icon">
              <img style="width: 48px;" src="assets/img/icons/duotrio.svg"/>
            </div>
            <h6>Duo/Trio/Quartet</h6>
          </div>
        </div>
        <div class="col-sm-3 col-sm-offset">
          <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Grupuri 5-12 dansatori">
            <input type="checkbox" id="grupuri" name="sectiuni" value="Grupuri">
            <div class="icon">
              <img style="width: 48px;" src="assets/img/icons/grupuri.png"/>
            </div>
            <h6>Grupuri</h6>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="choice" data-toggle="wizard-checkbox" rel="tooltip" id="sectiuni" title="Formaţii peste 13 dansatori.">
            <input type="checkbox" id="formatii" name="sectiuni" value="Formatii">
            <div class="icon">
              <img style="width: 48px;" src="assets/img/icons/formatii.png"/>
            </div>
            <h6>Formatii</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

最终解决方案（实现单选效果） #

通过修改jQuery脚本，实现点击某一选项时先清空同组内所有选项的选中状态，再激活当前选项，完美模拟单选按钮的互斥逻辑：

$('[data-toggle="wizard-checkbox"]').click(function(){
  // 获取当前选项所在的向导卡片容器，避免影响页面其他区域的同类元素
  var wizard = $(this).closest('.wizard-card');
  // 清除所有选项的激活样式
  wizard.find('[data-toggle="wizard-checkbox"]').removeClass('active');
  // 取消所有复选框的选中状态
  wizard.find('[type="checkbox"]').removeAttr('checked');
  // 选中当前选项对应的复选框（用prop操作布尔属性更规范）
  $(this).find('[type="checkbox"]').prop('checked', true);
  // 给当前选项添加激活样式，显示选中状态
  $(this).addClass('active');
});

代码逻辑说明 #

1. $(this).closest('.wizard-card')：精准锁定当前选项所在的父容器，确保操作只作用于同组内的选项
2. 先全局清空激活状态：保证每次点击后只有当前选项处于选中状态
3. 使用prop('checked', true)替代attr：对于checked这类布尔型DOM属性，jQuery官方推荐用prop方法操作，更符合浏览器DOM规范

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