jQuery实现一个全选复选框联动效果

类似邮件列表里的复选框
要求双向联动

☛ 【实现】：

<body>
    <div>
        <input type="checkbox" name="checkAll">全选
    </div>
    <br>
    <div class="cbList">
        <input type="checkbox" name="cb">
        <input type="checkbox" name="cb">
        <input type="checkbox" name="cb">
    </div>
</body>

<script>
    var $ckAll = $('input[name=checkAll]'),
    		$cb = $('input[name=cb]'),
    		$cbList = $('.cbList');
    
    $ckAll.on('click', function() {
    	var flag = $ckAll.prop('checked');
    
    	if (flag) {
    		$cb.prop('checked', true);
    	} else {
    		$cb.prop('checked', false);
    	}
    
    });
    
    
    $cbList.on('click', function() {
    	var flag = true;
    
    	$.each($cb, function(index, item) {
    		if (!$(item).prop('checked')) {
    			flag = false;
    		}
    	});
    
    	if (flag) {
    		$ckAll.prop('checked', true);
    	} else {
    		$ckAll.prop('checked', false);
    	}
    });
</script>

☛ 【补充】：

(1) 判断是否选中的两种写法：

var flag = $ckAll.prop('checked');
var flag = $ckAll.is(':checked');

(2) 注意 attr 和 prop

attr：作为一个节点属性，初始化之后不会改变
prop：会随着事件而改变

.attr( "checked" ): checked
.prop( "checked" ): true
.is( ":checked" ): true

Scoop It and Enjoy the Ride！