实现同class复选框单选：点击一个取消其余选中状态

我有多个class为el-checkbox__original的复选框，点击class为bpa-front-si-card的div后，包含复选框的容器会显示。当复选框被选中时，其对应的label标签和class为el-checkbox__input的span标签会添加is-checked类。我需要实现单选效果：点击其中一个复选框时，其余所有复选框都取消选中（包括移除is-checked类），但尝试的jQuery代码无法实现，求解决方案。

<!-- 触发复选框显示的元素 -->
<div id="bap-service-13" class="bpa-front-si-card">
  <div class="bpa-front-si-card__row">
  </div>
</div>

<!-- 复选框容器示例 -->
<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
    <div class="bpa-sei__left">
      <div class="bpa-sei__left-checkbox">
        <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox">
          <span class="el-checkbox__input">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
          </span>
        </label>
      </div>
      <div class="bpa-sei__left-body">
        <div class="bpa-se--heading">1.1ml</div>
        <div class="bpa-se--options">
          <div class="bpa-se-o__item">£0.00</div>
        </div>
      </div>
    </div>
    <div class="bpa-sei__right">
    </div>
  </div>
</div>

<!-- 复选框选中状态示例 -->
<div id="treatment-option-ext" class="bpa-service-extra__item">
  <div class="bpa-sei__header">
    <div class="bpa-sei__left">
      <div class="bpa-sei__left-checkbox">
        <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox is-checked">
          <span class="el-checkbox__input is-checked">
            <span class="el-checkbox__inner"></span>
            <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">
          </span>
        </label>
      </div>
      <div class="bpa-sei__left-body">
        <div class="bpa-se--heading">1.1ml</div>
        <div class="bpa-se--options">
          <div class="bpa-se-o__item">£0.00</div>
        </div>
      </div>
    </div>
    <div class="bpa-sei__right">
    </div>
  </div>
</div>

jQuery.noConflict();
setTimeout(function(){
    jQuery(document).ready(function($) {
        console.log("page loaded")
          
            $(".bpa-front-si-card").on('click', function(){
                console.log("service clicked")  
            });
          
            $(".el-checkbox__original").on('click', function(){
                  $('input.el-checkbox__original').not(this).prop('checked', false).closest("label").removeClass('is-checked').closest("span").removeClass('is-checked');  
            }) 
          
    })}, 6000);

问题分析 #

1. 层级定位错误：原代码中closest("span")逻辑错误，目标span（.el-checkbox__input）是复选框input的直接父元素，而非label的父级span，导致无法正确移除is-checked类。
2. 动态元素事件绑定失效：复选框是点击.bpa-front-si-card后动态显示的，直接绑定$(".el-checkbox__original").on('click')无法捕获动态生成元素的事件。
3. 状态同步问题：未处理当前复选框选中/取消时的类状态同步，可能导致视觉状态与实际选中状态不一致。

修正后的代码 #

jQuery.noConflict();
jQuery(document).ready(function($) {
    console.log("页面已加载");

    // 用事件委托绑定动态元素的点击事件
    $(document).on('click', '.el-checkbox__original', function() {
        const $currentCheckbox = $(this);
        const isChecked = $currentCheckbox.prop('checked');

        // 同步当前复选框的视觉类状态
        const $inputSpan = $currentCheckbox.closest('.el-checkbox__input');
        const $label = $currentCheckbox.closest('label');
        
        if (isChecked) {
            $inputSpan.addClass('is-checked');
            $label.addClass('is-checked');
            
            // 取消其他所有复选框的选中状态和视觉类
            $('.el-checkbox__original').not(this).each(function() {
                $(this).prop('checked', false);
                $(this).closest('.el-checkbox__input').removeClass('is-checked');
                $(this).closest('label').removeClass('is-checked');
            });
        } else {
            // 取消当前复选框的视觉类
            $inputSpan.removeClass('is-checked');
            $label.removeClass('is-checked');
        }
    });
});

关键改进点 #

• 使用事件委托绑定到document，确保动态生成的复选框也能触发事件。
• 正确定位目标元素：通过closest('.el-checkbox__input')直接找到需要修改类的span元素。
• 同步复选框的实际选中状态与视觉类状态，避免出现不一致的情况。
• 移除了不必要的setTimeout，jQuery(document).ready()本身已经会等待DOM加载完成。

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