jQuery-实现复选框的全选、全不选效果

xyc

     今天做项目遇到全选、全不选的效果，就简单的写了一下效果，给大家分享一下。
     原理思路：1.点击全选时，同时将下面的复选框全部勾选。
                     2.点击除了全选复选框以外其他复选框时，判断已经勾选的数量，是否等于除了全选复选框以外的所有选项，如果相等，就勾选全选复选框，否则就不勾选。
     效果：
     
     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;
    }
});

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

2021-6-28 11:44 上传

点击文件名下载附件
阅读权限: 90
下载积分: 金钱 -1

范范

支持支持