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>

Answer 2

input:checkbox与任何内容都不匹配。

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

Answer 3

这是你的fiddle。另外，我在我的解决方案中假设了接受＆amp;的项目的各自值。拒绝清单是一样的。

<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

String myTeam = "TeamOne"; //at line 3

希望有所帮助：）

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

3 个答案: