jQuery动态修改复选框属性后无法获取值，全选功能异常求助

我来帮你搞定这个问题！从你描述的现象和代码来看，大概率是动态设置复选框状态时的方法不对，或者取值时的选择器逻辑有问题，下面一步步分析解决：

一、核心问题：用prop()而非attr()操作checked状态 #

jQuery中，复选框的checked是DOM属性，不是HTML属性，动态修改或获取时必须用prop()方法，而不是attr()。如果你的代码里用了attr('checked', true)，就会出现设置后无法正确读取checked状态的情况。

正确的全选逻辑示例 #

假设你是点击某个复选框触发全选（比如专门的全选框，或按item_no分组全选），代码应该这样写：

// 场景1：点击专门的全选框（比如带.select-all类），选中所有.select-multiple复选框
$('.select-all').on('click', function() {
  const isChecked = $(this).prop('checked');
  // 给所有目标复选框同步状态
  $('.select-multiple').prop('checked', isChecked);
});

// 场景2：点击任意一个.select-multiple，选中同item_no组的所有复选框
$('.select-multiple').on('click', function(ev) {
  const isChecked = $(this).prop('checked');
  // 从class中提取item_no（匹配你模板里的{{$qr->item_no}}）
  const itemNo = $(this).attr('class').split(' ').filter(cls => !isNaN(cls))[0];
  // 选中同组的所有复选框
  $(`.select-multiple.${itemNo}`).prop('checked', isChecked);
});

二、正确获取选中复选框的值的方法 #

当你需要收集所有被选中的复选框值时，要确保选择器正确，并且用prop('checked')判断状态：

// 方法1：遍历判断
const selectedValues = [];
$('.select-multiple').each(function() {
  if ($(this).prop('checked')) {
    selectedValues.push($(this).val());
  }
});
console.log('选中的值：', selectedValues);

// 方法2：简洁的筛选写法
const selectedValues = $('.select-multiple:checked').map(function() {
  return $(this).val();
}).get();

三、额外排查点：label标签的事件冒泡影响 #

你的复选框放在<label>标签里，点击label也会触发复选框的点击事件，可能导致状态异常切换。可以在事件处理函数里加上阻止冒泡的代码：

$('.select-multiple').on('click', function(ev) {
  ev.stopPropagation(); // 阻止事件冒泡到label或父元素
  // 后续的全选逻辑...
});

四、验证DOM元素的正确性 #

如果还是有问题，先在浏览器控制台执行$('.select-multiple')，确认是否能正确获取到所有目标复选框，检查它们的value、class等属性是否和模板渲染的一致，排除选择器匹配错误的问题。

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