html jquery全选与反选checkbox代码

2020-08-26 网络
html jquery全选与反选checkbox代码，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html jquery全选与反选checkbox代码</title>
<script src="引入jquery.js地址"></script>
<script type="text/javascript">
//全选、全不选  
function selectAll(){
	if($("#selectAll").attr("checked")){
		$("input[name='selectbody']").attr("checked",true);
	} else{
		$("input[name='selectbody']").attr("checked",false);
	}
}
//选中反选  
function selectThis(obj){
	var flag = false;
	if($(obj).attr("checked") != "checked"){
		flag = false;
	} else{
		flag = true;
		$("input[name='selectbody']").each(function(){
			if($(this).attr("checked") != "checked"){
				flag = false;
			}
		})
	}
	if(flag){
		$("#selectAll").attr("checked",true);
	} else{
		$("#selectAll").attr("checked",false);
	}
}
</script>
</head>
<body>    
<table>
<tr><td>
<input type="checkbox" id="selectAll" value="全选" onclick="selectAll()">全选/反不选
</td></tr>
<tr><td><input type="checkbox" name="selectbody" onclick="selectThis(this)">篮球</td></tr>
<tr><td><input type="checkbox" name="selectbody" onclick="selectThis(this)">足球</td></tr>
<tr><td><input type="checkbox" name="selectbody" onclick="selectThis(this)">羽毛球</td></tr>
<tr><td><input type="checkbox" name="selectbody" onclick="selectThis(this)">兵乓球</td></tr>
</table>
</body>
</html>