jQuery-实现复选框的全选、全不选效果 - 苏飞论坛

上传

点击文件名下载附件
HTML：

[HTML] 纯文本查看 复制代码

<div class="div">

                <label><input type="checkbox" name="name" value="" id="allData">全选</label>

                <label><input type="checkbox" name="datalist" value="">CSS</label>

                <label><input type="checkbox" name="datalist" value="">HTML</label>

                <label><input type="checkbox" name="datalist" value="">JS</label>

                <label><input type="checkbox" name="datalist" value="">PHP</label>

                <label><input type="checkbox" name="datalist" value="">C#</label>

                

        </div>

css样式：

[CSS] 纯文本查看 复制代码

.div{

        margin-top:100px;

        margin-left:200px;

}

.div label{

        margin-right:30px;

}

.div label input{

        margin-right:10px;

        }

js代码：

[JavaScript] 纯文本查看 复制代码

//全选

$("#allData").click(function () {

    var userids = this.checked;

        $("input[name=datalist]").each(function () {

         this.checked = userids;

    });

    

});

   

    //复选框绑定单击事件

$("input[name=datalist]").click(function () {

    var length = $("input[name=datalist]:checked").length;

    var len = $("input[name=datalist]").length;

    if (length == len) {

        $("#allData").get(0).checked = true;

    } else {

        $("#allData").get(0).checked = false;

    }

});

以上就是实现全选、全不选的效果代码，如需源码，请点击》》 (, 下载次数: 0)