全选与被全选：Checkbox群组控制-优快云博客

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.youkuaiyun.com/zy1281539626/article/details/61914364

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src='jquery-1.12.4.js'></script>
</head>
<body>
	<input type="checkbox" name="checkAll_a">全选a
	<input type="checkbox" name="check_a">a1
	<input type="checkbox" name="check_a">a2
	<input type="checkbox" name="check_a">a3
	<br>
	<input type="checkbox" name="checkAll_b">全选b
	<input type="checkbox" name="check_b">b1
	<input type="checkbox" name="check_b">b2
	<input type="checkbox" name="check_b">b3

	<script type="text/javascript" language="javascript">        
    	$(document).on('click','input[name^=checkAll_]',function(){
    		var name = $(this).attr('name').split('checkAll_')[1];
    		var state = $(this).prop('checked');
    		$('input[name=check_'+name+']').prop('checked',state);
    	});
    	$(document).on('click','input[name^=check_]',function(){
    		var name = $(this).attr('name').split('check_')[1];
    		var len = $('input[name=check_'+name+']:checked').length;
    		if(len >= $('input[name=check_'+name+']').length){
    			console.log(true);
    			$('input[name=checkAll_'+name+']').prop('checked',true);
    		}else{
    			console.log(false);
    			$('input[name=checkAll_'+name+']').prop('checked',false);
    		}
    	});
    </script>
</body>
</html>