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

Posted 2023-03-10

【中文标题】单击时如何取消选中复选框

【英文标题】：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?的可能重复

【参考方案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>