如何使用标题复选框选中和取消选中所有复选框？

Question

我正在尝试使用标题中的单个复选框来检查和取消选中我的所有复选框，这在第一轮工作正常，但在之后停止工作

我尝试了以下代码，包括 .each() 函数

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="allcenter"><label for="allcenter">All</label>
    
    <input type="checkbox" class="dassoc_cen" value="1" id="dassoc_cen1">									
    <label for="dassoc_cen1">Cen 1</label>
    
    <input type="checkbox" class="dassoc_cen" value="1" id="dassoc_cen1">									
    <label for="dassoc_cen1">Cen 1</label>
    
    <input type="checkbox" class="dassoc_cen" value="3" id="dassoc_cen3">									
    <label for="dassoc_cen3">Cen 3</label>
    
    <script>
    	$('#allcenter').on('click',function(){
    		if($(this).is(':checked')){
    			$('.dassoc_cen').attr("checked",true);
    		}else{
    			$('.dassoc_cen').attr("checked",false);
    		}
    	})
    </script>

如果我第一次选中并取消选中标题复选框，系统工作正常，但在第一轮之后，其他复选框的 html 属性“已选中”变为“已选中”，但它不会在浏览器中反映它自己

Answer 1

改用prop：

$('#allcenter').on('click',function(){
    if($(this).is(':checked')){
        $('.dassoc_cen').prop("checked",true);
    }else{
        $('.dassoc_cen').prop("checked",false);
    }
})

if 是不必要的，你可以这样做：

$('#allcenter').on('click',function(){
    $('.dassoc_cen').prop("checked", $(this).is(':checked'));
})