在jquery中检查同一列中的相同顺序时，验证复选框

Question

我有几行复选框。当我单击第一行中的复选框时，当我单击第二行或第三行中以及同一列中的另一个复选框时，在一个类别（蓝框）内的情况下，取消选中上一个选中的复选框，并取消选中新复选框。检查。这工作正常。我的问题是，当我取消选中新选中的复选框时，它应该重新检查上一个选中的复选框。有谁可以帮我这个吗？

请注意，复选框的验证在每个类别（蓝框）中都是独立的。此外，始终检查每个类别的第一行。

演示如下。

$(".main").on('change', '.js-cars-item [type="checkbox"]', 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

  $(this).closest('.cars').find('.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 = [];
  $(this).closest(".cars").find(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
})

$('.js-add-category').click(function() {

  var categoryContent = `<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">Add Section</button>
</div> <br>`

  $('.main').append(categoryContent);

});


$(document.body).on('click', 'button.js-add-section', function() {
  var sectionContent = `<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>
  </ul> </div>`

  $(this).closest('.cars').append(sectionContent);

});

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

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

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

li {
  display: inline;
}

.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
}

<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">Add Section</button>
    <br>

    <div class="section">
    </div>
  </div>
  <br>

Answer 1

您可以通过假设您有两个复选框并将两个变量作为prev和new来执行此操作。因此，当你首先检查其中任何一个时，它将转到new，如果你检查任何其他的，前往prev，新选中的复选框将转到new，当您取消选中新选中的复选框时，它将首先检查如果在prev中有任何值，如果是，请选中该复选框并将其设为new并将当前值设置为prev。

Answer 2

@jones，在这里你必须通过给你的主汽车类别div提供ID来管理这个，而另一个Id管理你的汽车物品div。基于动态ID我创建密钥对值数组。在密钥中我存储您的汽车的ID，在值中我管理所选复选框Id的列表。当你取消选中时，我从数组中找到了密钥并将其值返回到包含checkedID轨道的数组中。并且当它未经检查时我将拾取lastID并从数组值中删除。请看看我给出的解决方案并让我知道这个案例对你有用吗？

$(document).ready(function(){
var cnt = 1;
var carcnt = 1;
var arryRollback= [];
$(".main").on('change', '.js-cars-item [type="checkbox"]', function() {
  var carKey = $(this).closest('.cars').attr("id").replace("carCategory","");
  var carVal = $(this).closest('.js-cars-item').attr("id").replace("chkcar_","");
  var idx = $(this).closest('li').index(); 
  var chk = $(this).is(":checked"); 
  var obj = this; 
  if($(this).prop("checked"))
  {
	  if(arryRollback.length ==0){
		 var sArray = [];
		 sArray.push(carVal);
		 var singleEntity = {
			carsParent : carKey,
			carVal : sArray
		 };
		 arryRollback.push(singleEntity);
	  }
	  else{
		 if(findObjectByKey(arryRollback,"carsParent",carKey)){
		  for (var i = 0; i < arryRollback.length; i++) {
			if (arryRollback[i]["carsParent"] === carKey) {
				var valArray = [];
				valArray =  arryRollback[i]["carVal"];
				valArray.push(carVal);
				arryRollback[i]["carVal"] = valArray;
			}
		  }
		}
		else{
			var sArray = [];
			sArray.push(carVal);
			 var singleEntity = {
				carsParent : carKey,
				carVal : sArray
			 };
			 arryRollback.push(singleEntity);
		}
	  }
	  $(this).closest('.cars').find('.js-cars-item').each(function() { //Loop every js-cars-item
    $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
  });
  }
  else{
     for (var i = 0; i < arryRollback.length; i++) {
	   if (arryRollback[i]["carsParent"] === carKey) {
	      var valArray = [];
	      valArray =  arryRollback[i]["carVal"];
		  if(valArray.length == 0)
		   {
		      $("#chkcar_"+ carKey + "_1").find(' li:eq(' + idx + ') [type="checkbox"]').prop("checked", true);
		   }
		   else{
		      valArray.splice(-1,1);
			  console.log(arryRollback);
		      if(valArray.length == 0)
				{
				  $("#chkcar_"+ carKey + "_1").find(' li:eq(' + idx + ') [type="checkbox"]').prop("checked", true);
				}
			  else{

				$("#chkcar_"+ valArray[valArray.length-1]).find(' li:eq(' + idx + ') [type="checkbox"]').prop("checked", true);
			  }
		   }
	   }
	 }
  }

  
 
})

function findObjectByKey(array, key, value) {
    
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return true;
        }
    }
    return false;
}
$('.js-add-category').click(function() {
 carcnt = carcnt + 1;
 var categoryContent = '<div class="cars" id="carCategory'+carcnt+'">' +
    '<div class="cars-item js-cars-item" id="chkcar_'+carcnt+'_1"> <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" id="btnSaveSec_'+carcnt+'">Add Section</button>' +
	'<button type="button" class="js-save-section">Add Section</button>' +
	'</div> <br>';
  $('.main').append(categoryContent);
});


$(document.body).on('click', 'button.js-add-section', function() {

     var currsection = $(this).attr("id").replace("btnSaveSec_","");
	  var totCount = $("#carCategory"+currsection).find(".cars-item").length +1;
	  var sectionContent = '<div class="cars-item js-cars-item" id="chkcar_'+currsection+'_'+totCount+'">' +
	  '<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>' +
	  '</ul> </div>';
	  $(this).closest('.cars').append(sectionContent);
	});
	$(document.body).on('click', 'button.js-save', function() {
		alert('hi');
	});
})

.cars-item {
  border-bottom: 1px solid gray;
}
ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}
li {
  display: inline;
}
.cars {
  box-sizing: content-box;
  width: 250px;
  height: auto;
  padding: 10px;
  border: 5px solid blue;
}

<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" id="carCategory1">
    <div class="cars-item js-cars-item" id="chkcar_1_1">
      <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" id="btnSaveSec_1">Add Section</button>
    <button type="button" class="js-save-section">Add Section</button>
    <br>
    <div class="section">
    </div>
  </div>
  <br>

很高兴收到你的消息！