如果选中了其中一​​个复选框选项，则取消选中所选复选框

Question

我在同一页面上有两组复选框选项。下面是代码。

<div class="col-xs-12">
<label class="checkbox-inline"> 
<input type="checkbox" th:field="*{borrowerRace1}"  th:value="1"  th:text="borrower1" />
 </label>
 </div>
 <div class="col-xs-12">
 <label class="checkbox-inline"> 
 <input type="checkbox" th:field="*{borrowerRace1}"  th:value="2"  th:text="borrower2" />
  </label>
  </div>
  <div class="col-xs-12">
  <label class="checkbox-inline"> 
   <input type="checkbox" th:field="*{borrowerRace1}"  th:value="3"  th:text="borrower3" />
       </label>
   </div>
     <div class="col-xs-12">
        <label class="checkbox-inline"> 
          <input type="checkbox" th:field="*{borrowerRace1}"  th:value="4" th:text="borrower4" />
        </label>
        </div>


        <div class="col-xs-12">
              <label class="checkbox-inline"> 
  <input type="checkbox" th:field="*{borrowerEthnicity1}"  th:value="1" th:text="Ethnicity1" />
           </label>
        </div>
           <div class="col-xs-12">
         <label class="checkbox-inline"> 
         <input type="checkbox" th:field="*{borrowerEthnicity2}"  th:value="2" th:text="Ethnicity2" />
      </label>
          </div>
     <div class="col-xs-12">
      <label class="checkbox-inline"> 
 <input type="checkbox" th:field="*{borrowerEthnicity3}"  th:value="3"  th:text="Ethnicity3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline"> 
 <input type="checkbox" th:field="*{borrowerEthnicity4}"  th:value="4" th:text="Ethnicity4" />
   </label>
    </div>

现在，

• 用户可以选择前3个复选框，但单击第4个（最后一个）复选框 选择第4个（最后一个）并取消选择该组的所有其他组。同样应该 适用于所有复选框集。

• 示例：用户可以同时选中A，B，C复选框，但是当他检查D时 所有上述选中的复选框都应取消选中。类似地，对于E，F，G 和H.我希望我现在很清楚。

请帮我解决这个问题。我希望我很清楚，如果不是，请让我知道

Answer 1

以下代码部分应根据您的要求运作

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.checkbox1').on('click', function() {    
  	var last_chekbox1 = $('.checkbox1:last');  	
  	if (last_chekbox1.is(':checked')) {     
    	$('.checkbox1').prop('checked', false);
      $(this).prop('checked', true);
    }    
  });
  $('.checkbox2').on('click', function(e) {
  	var last_chekbox2 = $('.checkbox2:last');  	
  	if (last_chekbox2.is(':checked')) {
      $('.checkbox2').prop('checked', false);
      $(this).prop('checked', true);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" class="checkbox1" /> A
  </label>
</div>
<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" class="checkbox1" /> B
  </label>
</div>
<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" class="checkbox1" /> C
  </label>
</div>
<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" class="checkbox1" /> D
  </label>
</div>

<hr>

<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" class="checkbox2" /> E
  </label>
</div>
<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" class="checkbox2" /> F
  </label>
</div>
<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" class="checkbox2" /> G
  </label>
</div>
<div class="col-xs-12">
  <label class="checkbox-inline">
    <input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" class="checkbox2" /> H
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

$('checkbox1').on('click'function(){
$('checkbox').attr('checked',false)
$(this).attr('checked',true)
})

尝试这样的事情