求助：jQuery实现同列checkbox取消新选后恢复上一选中项

我来帮你搞定这个问题！核心思路是为每个类别（.cars）的每一列记录之前选中的checkbox元素，这样当你取消当前选中的选项时，就能快速恢复之前的状态。同时我也修正了原代码里的小问题（比如重复ID、未闭合的引号），确保逻辑更严谨。

修改后的完整代码 #

JavaScript

$(".main").on('change', '.js-cars-item [type="checkbox"]', function() {
  const $this = $(this);
  const $carsContainer = $this.closest('.cars');
  const columnIndex = $this.closest('li').index(); // 获取当前checkbox所在的列索引
  const isChecked = $this.is(":checked");
  // 获取当前列的所有checkbox
  const $columnCheckboxes = $carsContainer.find(`.js-cars-item li:eq(${columnIndex}) [type="checkbox"]`);

  // 初始化或获取当前列的上一个选中项
  let prevCheckedBox = $carsContainer.data(`prevChecked-${columnIndex}`);
  if (!prevCheckedBox) {
    // 默认初始选中项是第一行的checkbox（符合你"第一行始终选中"的要求）
    prevCheckedBox = $columnCheckboxes.eq(0);
    $carsContainer.data(`prevChecked-${columnIndex}`, prevCheckedBox);
  }

  if (isChecked) {
    // 选中当前checkbox时：取消上一个选中项（排除自己），并更新记录
    prevCheckedBox.not($this).prop("checked", false);
    $carsContainer.data(`prevChecked-${columnIndex}`, $this);
  } else {
    // 取消当前checkbox时：恢复上一个选中项的选中状态
    prevCheckedBox.prop("checked", true);
    // 重置记录为原来的选中项
    $carsContainer.data(`prevChecked-${columnIndex}`, prevCheckedBox);
  }

  // 输出当前选中的checkbox ID（用于调试）
  const checkedIds = [];
  $carsContainer.find(".cars-item input:checkbox:checked").each(function() {
    checkedIds.push($(this).attr('id'));
  });
  console.clear();
  console.log("当前选中的checkbox：", checkedIds);
});

// 添加类别按钮逻辑（修正了ID重复问题）
$('.js-add-category').click(function() {
  const uniqueId = Date.now();
  const categoryHtml = `
<div class="cars">
  <div class="cars-item js-cars-item">
    <ul>
      <li>
        <input type="checkbox" id="car-1-${uniqueId}" checked disabled>
        <label for="car-1-${uniqueId}"><i class="icon-tick"></i></label>
      </li>
      <li>
        <input type="checkbox" id="car-2-${uniqueId}" checked disabled>
        <label for="car-2-${uniqueId}"><i class="icon-tick"></i></label>
      </li>
      <li>
        <input type="checkbox" id="car-3-${uniqueId}" checked disabled>
        <label for="car-3-${uniqueId}"><i class="icon-tick"></i></label>
      </li>
    </ul>
  </div>
  <button type="button" class="js-add-section">Add Section</button>
  <button type="button" class="js-save-section">Save Section</button>
</div>
<br>`;
  $('.main').append(categoryHtml);
});

// 添加行按钮逻辑（修正了引号和ID重复问题）
$(document.body).on('click', 'button.js-add-section', function() {
  const uniqueId = Date.now();
  const sectionHtml = `
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-${uniqueId}">
      <label for="car-1-${uniqueId}"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-${uniqueId}">
      <label for="car-2-${uniqueId}"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-${uniqueId}">
      <label for="car-3-${uniqueId}"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>`;
  $(this).closest('.cars').append(sectionHtml);
});

$(document.body).on('click', 'button.js-save', function() {
  alert('hi');
});

CSS（保持原代码不变）

.cars-item {
 border-bottom: 1px solid gray;
 }
 ul {
 margin: 2px;
 }
 li {
 display: inline;
 }
 .cars {
 box-sizing: content-box;
 width: 250px;
 height: auto;
 padding: 10px;
 border: 5px solid blue;
 }

HTML（保持原代码不变）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="js-add-category">Add Category</button>
<br>
<br>
<div class="main">
 <div class="cars">
 <div class="cars-item js-cars-item">
 <ul>
 <li>
 <input type="checkbox" id="car-1-3" checked disabled>
 <label for="car-1-3"><i class="icon-tick"></i></label>
 </li>
 <li>
 <input type="checkbox" id="car-2-3" checked disabled>
 <label for="car-2-3"><i class="icon-tick"></i></label>
 </li>
 <li>
 <input type="checkbox" id="car-3-3" checked disabled>
 <label for="car-3-3"><i class="icon-tick"></i></label>
 </li>
 </ul>
 </div>
 <button type="button" class="js-add-section">Add Section</button>
 <button type="button" class="js-save-section">Save Section</button>
 <br>
 <div class="section">
 </div>
 </div>
 <br>

关键修改说明 #

1. 记录上一个选中项：使用jQuery的data()方法，为每个.cars容器的每一列存储之前选中的checkbox元素，确保每个类别的状态独立。
2. 选中逻辑优化：当选中新的checkbox时，自动取消上一个选中项，并更新记录；当取消当前选中项时，立即恢复之前的选中状态。
3. 修复代码问题：原代码中存在HTML字符串引号未闭合、ID重复的问题，现在用Date.now()生成唯一ID，避免冲突。
4. 符合需求约束：第一行的checkbox始终保持初始选中状态（禁用且无法修改），作为每一列的默认选中项。

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