勾选某一checkbox时同步勾选对应另一checkbox，循环生成的复选框仅首个生效如何解决

问题根因 #

• HTML规范要求页面内id属性必须全局唯一，你用foreach循环生成多组元素时，所有复选框都复用了selectTest、testPrice两个相同id，jQuery通过id选择器$("#selectTest")只会匹配到页面中第一个符合的元素，事件也只会绑定在第一个元素上，因此只有第一组联动生效。

解决方法 #

方案1：无需修改原有HTML结构，仅调整jQuery代码（推荐） #

利用类选择器绑定事件，再通过DOM层级遍历匹配同组的price复选框即可：

// 给所有select-test类的复选框统一绑定change事件
$('.select-test').on('change', function() {
  // 找到当前勾选框所属的form-check容器，再查找容器内的price类复选框
  const targetPrice = $(this).closest('.form-check').find('.price');
  // 同步勾选状态
  targetPrice.prop('checked', this.checked);
});

如果你的复选框是页面加载完成后动态插入的（比如异步请求后渲染），可以改用事件委托的方式绑定，避免新增的元素没绑定到事件：

// 绑定到页面加载时就存在的父容器即可，示例用body，实际可以替换为更贴近列表的上层容器
$('body').on('change', '.select-test', function() {
  const targetPrice = $(this).closest('.form-check').find('.price');
  targetPrice.prop('checked', this.checked);
});

方案2：优化HTML的id属性（可选，更符合规范） #

如果业务需要保留id的使用，可以给循环生成的每个id加上唯一标识，比如用$item的主键id：

@foreach($testItems->where('category_id', $category->id) as $item)
  <div class="col-md-12">
    <div class='form-check'>
      <div class="custom-control custom-checkbox">
         <input type="checkbox"class="select-test form-check-input form-check-secondary" id="selectTest{{$item->id}}" name="test_name" value="{{$item->test_name}}">
      </div>
      <input type="checkbox" class="price" id="testPrice{{$item->id}}" name="test_price" value="{{$item->price}}" >
      <span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
   </div>
</div>
@endforeach 

修改后方案1的jQuery逻辑依然可以正常使用，不需要调整。

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