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属性“ checked”变为“ checked”，但它不能在浏览器中反映出来

Answer 1

改为使用prop：

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

如果没有必要，您可以这样做：

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

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

1 个答案: