在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>