jQuery复选框交互问题：取消新选中项时恢复前选中状态

Got it, let's sort this out for you! The core issue here is that your current code doesn't keep track of which checkbox was selected in a column before the active one. So when you uncheck the current selection, there's no way to revert back to the prior choice.

We can fix this by adding a simple state tracker to remember the last checked checkbox for each column. Here's the complete solution:

Updated Code #

HTML (fixed the broken input element at the end) #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-3">
      <label for="car-1-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-3">
      <label for="car-2-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-3">
      <label for="car-3-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-3">
      <label for="car-4-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-3">
      <label for="car-5-3"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-4">
      <label for="car-1-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-4">
      <label for="car-2-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-4">
      <label for="car-3-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-4">
      <label for="car-4-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-4">
      <label for="car-5-4"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-5">
      <label for="car-1-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-5">
      <label for="car-2-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-5">
      <label for="car-3-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-5">
      <label for="car-4-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-5">
      <label for="car-5-5"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-6">
      <label for="car-1-6"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-6">
      <label for="car-2-6"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-6">
      <label for="car-3-6"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-6">
      <label for="car-4-6"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-6">
      <label for="car-5-6"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-7">
      <label for="car-1-7"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-7">
      <label for="car-2-7"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-7">
      <label for="car-3-7"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-7">
      <label for="car-4-7"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-7">
      <label for="car-5-7"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>

CSS (unchanged from your original code) #

.cars-item { border-bottom: 1px solid gray; }
ul { margin: 2px; }
li { display: inline; }

JavaScript (with state tracking added) #

// Track the last checked checkbox for each column (uses column index as key)
const columnLastChecked = {};

$('.js-cars-item [type="checkbox"]').change(function() {
  const $this = $(this);
  const idx = $this.closest('li').index();
  const isChecked = $this.is(":checked");

  if (isChecked) {
    // When checking a new box:
    // 1. Capture any existing checked box in the column
    const currentActive = $('.js-cars-item').find(`li:eq(${idx}) [type="checkbox"]:checked`).not($this);
    if (currentActive.length > 0) {
      columnLastChecked[idx] = currentActive[0];
    }
    // 2. Uncheck all other boxes in the column
    $('.js-cars-item').each(function() {
      $(this).find(`li:eq(${idx}) [type="checkbox"]`).not($this).prop("checked", false);
    });
    // 3. Update the tracker to the newly checked box
    columnLastChecked[idx] = this;
  } else {
    // When unchecking the active box:
    // Restore the last checked box if it exists
    if (columnLastChecked[idx]) {
      $(columnLastChecked[idx]).prop("checked", true);
      // Keep the tracker updated to the restored box
      columnLastChecked[idx] = columnLastChecked[idx];
    }
  }

  // Log current checked boxes (same as your original code)
  const checkeds = [];
  $(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
});

Key Changes Explained #

• columnLastChecked Object: This simple object stores the last checked checkbox element for each column (using the column's index as the key). It acts as memory for prior selections.
• Checking Logic: When you select a new checkbox, we first save any existing active checkbox in the column, then uncheck all others, and update the tracker to the new selection.
• Unchecking Logic: When you uncheck the current active checkbox, we check if there's a previously recorded selection for that column. If there is, we restore its checked state immediately.

Now when you uncheck the currently selected box in a column, it will revert back to the last checkbox you had selected there—exactly what you needed!

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