javascript - 如何使复选框检查在两个复选框组之间切换？

Question

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

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

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

我尝试过类似的事情。

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

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

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