jquery全选小功能 | 易学教程

背景需求：全选，取消全选，以及全部选中后自动勾选全选，全选后取消一个时同时自动取消全选（不知道怎么描述这个功能，就这么解释吧。。。）

html代码如下：

<input type="checkbox" id="checkAll" name="checkAll"/>全选

<input type="checkbox" name="check" value="1"/>1
<input type="checkbox" name="check" value="2"/>2
<input type="checkbox" name="check" value="3"/>3
<input type="checkbox" name="check" value="4"/>4
<input type="checkbox" name="check" value="5"/>5

现在开始做全选和取消全选

功能要求：如题，就是点击一次全选再点击一次取消

$(document).ready(function(){
    //全选与取消全选
    $("#checkAll").click(function(){
        if( $("#checkAll").attr("checked")=="checked"){
             $("input[name='check']").attr("checked",true);
        }else{
             $("input[name='check']").attr("checked",false);
        }
    });
    
})

好，现在全选做完了，那么假如我点击全选后，发现有一个是我不需要的，我又取消掉它，这时候全选按钮是不是应该自动的取消全选？那再假如我发现这个选项其实我还是需要的，我又给勾上了，这时全选框是不是也应该勾上（全选框应该是自动适应其余复选框的）

功能要求：同上，如题

接着后面写：

$(document).ready(function(){
    //全选与取消全选
    $("#checkAll").click(function(){
        if( $("#checkAll").attr("checked")=="checked"){
             $("input[name='check']").attr("checked",true);
        }else{
             $("input[name='check']").attr("checked",false);
        }
    });
    //同步全选功能
    $("input[name='check']").click(function(){
        var flag = true;
        $("input[name='check']").each(function(){
            if($(this).attr("checked")!="checked"){
                flag=fasle;
                return;
            }
        });
        if(flag){
            $("#checkAll").attr("checked",true);
        }else{
            $("#checkAll").attr("checked",false);
        }
    });
})

现在全选功能就完善了，各位猿友可以试试。

代码手打，难免有错字、漏字、描述不清等现象，欢迎大家批评指导，如果觉得有用，就告诉我一声，给我点鼓励。

来源：oschina

链接：https://my.oschina.net/u/2297176/blog/516933

标签

jquery

全选