单击时如何取消选中复选框答案

【问题标题】：How do I uncheck checkbox when click单击时如何取消选中复选框
【发布时间】：2019-04-16 07:17:18
【问题描述】：

我有复选框，当检查“取消选中”复选框时，应取消选中所有复选框，并应选中“取消选中”复选框。

这是我迄今为止尝试过的

<input type="checkbox" name="" id="c1" class="checkbox nonCheck">  
<label for="c1"><span class="icon"></span>Uncheck</label>   

<input type="checkbox" name="" id="c2" class="checkbox">  
<label for="c2"><span class="icon"></span>value 1</label>   

<input type="checkbox" name="" id="c3" class="checkbox">  
<label for="c3"><span class="icon"></span>value 2</label>   



$(function(){
    $('.nonCheck').click(function(){
        $('input:checked').prop('checked',false).not('.nonCheck'); 
    }); 
})

但我的代码不起作用。如何更改代码以修复它？请帮忙。

【问题讨论】：

我认为您的“取消选中”字段可能应该是一个按钮而不是一个复选框，因为它是一个瞬时事件，而不是一个切换状态。
应该是$('input:checked').not('.nonCheck').prop('checked',false); 否则你将它应用到所有复选框
check / uncheck checkbox using jquery?的可能重复

标签： jquery

【解决方案1】：

检查此代码，我在 jquery 选择器的 prop 属性中添加了一个函数。此代码按照您的逻辑运行。

$(function(){
    $('.nonCheck').change(function(){
          $("input:checkbox").prop("checked", function( i, val ) {
            return !val;
          });
    }); 
})

【讨论】：

【解决方案2】：

您需要检查每次点击“任何”复选框是否选中“取消选中”。

let anyCheckbox = $(".checkbox");

anyCheckbox.on("click", function() {
	if($(".nonCheck").prop('checked'))
    	   anyCheckbox.not('.nonCheck').prop('checked', false);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="c1" class="checkbox nonCheck">
<label for="c1"><span class="icon"></span>Uncheck</label>

<input type="checkbox" name="" id="c2" class="checkbox">
<label for="c2"><span class="icon"></span>value 
 1</label>

<input type="checkbox" name="" id="c3" class="checkbox">
<label for="c3"><span class="icon"></span>value 2</label>

因此，每当“取消选中”被“选中”时，请在 false 上保留所有其他复选框

【讨论】：

【解决方案3】：

我添加了一个 if 语句 if ($(this).prop('checked')) 来检查“所有复选框”复选框是否被选中。

将单击更改为更改事件，因为您也可以在不使用鼠标的情况下选中复选框。

移动了not() 选择器，以便在设置属性之前过滤对象。

将最后一个 ; 添加到您的代码中，因为不使用它是邪恶的（尽管对于大多数解析器来说它不会阻止代码）

$(function() {
  $('.nonCheck').on('change', function() {
    if ($(this).prop('checked')) {
      $('input:checked').not('.nonCheck').prop('checked', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="c1" class="checkbox nonCheck">
<label for="c1"><span class="icon"></span>Uncheck</label>

<input type="checkbox" name="" id="c2" class="checkbox">
<label for="c2"><span class="icon"></span>value 
 1</label>

<input type="checkbox" name="" id="c3" class="checkbox">
<label for="c3"><span class="icon"></span>value 2</label>

【讨论】：

【解决方案4】：

检查此代码，我认为这会对您有所帮助

$(function(){
        $('.nonCheck').click(function(){
            $('input.checkbox:checked').prop('checked',false); 
        }); 
        $('.checkbox').click(function(){ 
        	$('input.nonCheck:checked').prop('checked',false); 
        });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="" id="c1" class="nonCheck">  
                        <label for="c1"><span class="icon"></span>Uncheck</label>   

                        <input type="checkbox" name="" id="c2" class="checkbox">  
                        <label for="c2"><span class="icon"></span>value 
 1</label>   

                        <input type="checkbox" name="" id="c3" class="checkbox">  
                        <label for="c3"><span class="icon"></span>value 2</label>

【讨论】：