jQuery（全选/反选）与每个选项的联动

项目在使用全选/反选功能时，一般通过单个复选框实现，并且要求此复选框与每个选项的复选框实现实时的联动功能。这句话读起来有点绕，直接上代码，简洁易懂：
//html部分

<input type="checkbox" name="fruit[]"/>苹果<br/>
<input type="checkbox" name="fruit[]"/>菠萝<br/>
<input type="checkbox" name="fruit[]"/>芒果<br/>
<br/>
<input type="checkbox" id="all_ck"/>全选

//jQuery部分

//全选 与 每一项 的联动   方法一：
$('[name="fruit[]"]:checkbox').click(function(){
    var biaozhi=true;
    $('[name="fruit[]"]:checkbox').each(function(){
        if(!this.checked){
            biaozhi=false;
        }
    })
    $('#all_ck').prop('checked',biaozhi);
})
//全选 与 每一项 的联动   方法二：【更简洁！】
$('[name="fruit[]"]:checkbox').click(function(){
    var biaozhi=$('[name="fruit[]"]:checkbox');
    $('#all_ck').prop('checked',biaozhi.length==biaozhi.filter(':checked').length);
})
//全选与反选（通过单一复选框实现）
$('#all_ck').click(function(){
    if(this.checked){
        $('[name="fruit[]"]:checkbox').prop('checked',true);
    }else{
        $('[name="fruit[]"]:checkbox').prop('checked',false);
    }
})

效果图：

解释：
当列表项被全部勾选时，下面的“全选”框也会联动选中；
一旦上面有任意一个选项的勾选状态被取消，下面的“全选”框也会联动取消。