Question

我有一个复选框，当选中“取消选中”复选框时，应该取消选中所有复选框，并且应该选中“取消选中”复选框。

这是我到目前为止尝试过的

<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'); 
    }); 
})

但是我的代码无法正常工作。如何更改代码以解决问题？请帮忙。

Answer 1

您需要选中“取消”复选框是否选中的“任何”复选框。

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

Answer 2

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

$(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>

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

Answer 4

检查此代码，我在jquery选择器的 prop 属性中添加了一个函数。此代码根据您的逻辑工作。

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

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

4 个答案: