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);    }})

效果图：

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