JQuery checkbox全选，反选实例

最新推荐文章于 2022-08-29 21:32:04 发布

居无常

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量593

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u010095549/article/details/45170561

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

网上有很多实现html checkbox全选、反选的例子，如果是单单用Javascript原生代码编写的话，网上的代码一大把都是复制到html文件后，就可以运行的。而我找了很多用jQuery实现的，却发现使用高版本的jQuery插件时，运行不起来的情况，用他们使用的那个版本（如：1.4的版本）却可以运行出效果来。

一下是我用JQuery1.11的实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.2.min.js"></script> 
<script type="text/javascript"> 
//全选 
function CheckedAll(){
	var arr = $(':checkbox');
	for (var i = 0; i < arr.length; i++) {
		arr[i].checked = true;
	}
} 

//全不选 
function CheckedNo(){ 
	var arr = $(':checkbox');
	for (var i = 0; i < arr.length; i++) {
		arr[i].checked = false;
	}
} 

//反选 
function CheckedRev(){ 
	var arr = $(':checkbox'); 
	for(var i=0;i<arr.length;i++){ 
		arr[i].checked = ! arr[i].checked; 
	}
} 
function CheckedAllOrNo() {
	var arr = $(':checkbox');
	for (var i = 1; i < arr.length; i++) {
		arr[i].checked = arr[0].checked;
	}
}
</script> 
</head>
<body> 
<div> 
<input id="CheckAll" type="checkbox" οnclick="javascript:CheckedAllOrNo();"/>全选\全不选<br/>
<input name="subBox" type="checkbox" />选项1<br/> 
<input name="subBox" type="checkbox" />选项2<br/> 
<input name="subBox" type="checkbox" />选项3<br/>
<input name="subBox" type="checkbox" />选项4<br/>
</div> 
<input type="button" name="btnCheckedAll" value="全　选" οnclick="javascript:CheckedAll();" /> 
<input type="button" name="btnCheckedNo" value="全不选" οnclick="javascript:CheckedNo();" /> 
<input type="button" name="btnCheckedRev" value="反　选" οnclick="javascript:CheckedRev();" /> 
</body> 
</html>

学习之余，不忘记录，与大家分享~！

居无常

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery checkbox全选，反选实例

网上有很多实现html checkbox全选、反选的例子，如果是单单用Javascript原生代码编写的话，网上的代码一大把都是复制到html文件后，就可以运行的。而我找了很多用jQuery实现的，却发现使用高版本的jQuery插件时，运行不起来的情况，用他们使用的那个版本（如：1.4的版本）却可以运行出效果来。一下是我用JQuery1.11的实现Insert title here
复制链接

扫一扫

专栏目录