javascript - 在 jquery 验证中检查复选框

Question

我有几行复选框。场景是当我单击第一行中的一个复选框时，当我单击第二行或第三行中同一列中的另一个复选框时，取消选中先前选中的复选框并选中新复选框。这工作正常。我的问题是，当我取消选中新选中的复选框时，它应该重新选中之前选中的复选框。谁能帮我解决这个问题？

演示如下。

$('.js-cars-item [type="checkbox"]').change(function() {
  var idx = $(this).closest('li').index();      //Get the index - Number in order
  var chk = $(this).is(":checked");             //Get if checked or not
  var obj = this;                               //Checkbox object

  $('.js-cars-item').each(function() {         //Loop every js-cars-item
    //Find the checkbox with the same index of clicked checkbox. Change disabled property
    $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
  });
  
   var checkeds = [];
  $(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
})

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

<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>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-8">
      <label for="car-1-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-8">
      <label for="car-2-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-8">
      <label for="car-3-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-8">
      <label for="car-4-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-8">
      <label for="car-5-8"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>

Answer 1

我已经更新了你的javascript代码，请试试这个:

$('.js-cars-item [type="checkbox"]').change(function() {
  var idx = $(this).closest('li').index();      //Get the index - Number  in order
  var chk = $(this).is(":checked");             //Get if checked or not
  var obj = this;                               //Checkbox object
  if(chk)
  { //If it is checked 
    $('.previous_'+idx).removeClass('previous_'+idx); //Remove the 'previous_$index' class from the checkbox
    $('.js-cars-item').find('li:eq(' + idx + ') [type="checkbox"]:checked').not(obj).addClass('previous_'+idx).prop("checked", false); //set the 'previous_$index' class to an existing checked checkbox and remove the checked property
  }
  else if($('.previous_'+idx).length)
  { //If the 'previous_$index' class is available while uncheck the current checkbox
    $('.previous_'+idx).prop("checked", true).removeClass('previous_'+idx); //set the 'previous_$index' class's checkbox to checked and remove this class
    $(obj).addClass('previous_'+idx); //set the 'previous_$index' class to the currently unchecked checkbox
  }
   var checkeds = [];
  $(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
})

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

<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>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-8">
      <label for="car-1-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-8">
      <label for="car-2-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-8">
      <label for="car-3-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-8">
      <label for="car-4-8"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-8">
      <label for="car-5-8"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>