如何在两个复选框组之间进行复选框检查切换？答案

【问题标题】：How to make checkbox check toggle between two checkbox groups?如何在两个复选框组之间进行复选框检查切换？
【发布时间】：2018-01-11 19:04:23
【问题描述】：

我正在创建两组具有相同值的复选框。一个是接受的水果列表，另一个是拒绝的水果列表。

两个复选框列表具有相同的水果名称和值。

现在我需要确保用户从第一组中选择水果，而不应该从第二组中选择水果名称，反之亦然。

我试过这样的。

$('input[name="acceptFruit"]').click(function(){
        let acceptedFruits = $(this).val();
        $('input:checkbox[name="rejectFruit"][value="' + acceptedFruits + '"]').attr('checked', false);
    });

请建议我如何继续使用 Jquery。

【问题讨论】：

复选框或单选按钮？
复选框列表

标签： javascript jquery checkbox

【解决方案1】：

您可以在所有复选框上收听change 事件，然后如果您的复选框刚刚被选中，请取消选中具有相同值的所有其他复选框：

$('input[type="checkbox"]').on('change',function(){
  if($(this).is(':checked')){
    $('input[name^="list"][value="'+$(this).attr('value')+'"]').not($(this)).prop('checked',false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="first">
  <li><input type="checkbox" name="list1" value="1"/> 1</li>
  <li><input type="checkbox" name="list1" value="2"/> 2</li>
  <li><input type="checkbox" name="list1" value="3"/> 3</li>
</ul>

<ul id="second">
  <li><input type="checkbox" name="list2" value="1"/> 1</li>
  <li><input type="checkbox" name="list2" value="2"/> 2</li>
  <li><input type="checkbox" name="list2" value="3"/> 3</li>
</ul>

【讨论】：

【解决方案2】：

input:checkbox 不会匹配任何内容。

仅使用input 或input[type="checkbox"][name="rejectFruit"][value="..."]

【讨论】：

【解决方案3】：

这是给你的fiddle。另外，我在我的解决方案中假设接受和拒绝列表中项目的各个值是相同的。

var complements = {
	accept: 'reject',
  reject: 'accept'
};

$('input[type=checkbox]').change(function() {
	var val = $(this).val();
  var type = complements[$(this).prop('name')];
  
  $(`input[name=${type}][value=${val}]`).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Accept:
<input type="checkbox" name="accept" value="1"> Apple
<input type="checkbox" name="accept" value="2"> Banana
<input type="checkbox" name="accept" value="3"> Orange

<br>
Reject:
<input type="checkbox" name="reject" value="1"> Apple
<input type="checkbox" name="reject" value="2"> Banana
<input type="checkbox" name="reject" value="3"> Orange

希望有帮助:)

【讨论】：