checkbox全选和反选

最新推荐文章于 2023-02-10 17:25:55 发布

飞鱼武士

最新推荐文章于 2023-02-10 17:25:55 发布

阅读量524

点赞数

分类专栏： web前端文章标签： checkbox

本文链接：https://blog.csdn.net/xcwll_sina/article/details/46832361

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"
	type="text/javascript"></script>

</head>
<body>
	<div>
		<input id="checkAll" type="checkbox" />全选 <input name="subBox"
			type="checkbox" />项1 <input name="subBox" type="checkbox" />项2 <input
			name="subBox" type="checkbox" />项3 <input name="subBox"
			type="checkbox" />项4
	</div>
</body>
</html>

Javascript版本，适应性较好

$("#checkAll").click(function() {
			
			if(cbVal == 0){
				cbVal = 1;
				var code_Values = document.getElementsByName("subBox"); 
				for(i = 0;i < code_Values.length;i++){ 
					if(code_Values[i].type == "checkbox") 
					{ 
						code_Values[i].checked = true; 
					} 
				} 
			}else{
				cbVal = 0;
				var code_Values = document.getElementsByName("subBox"); 
				for(i = 0;i < code_Values.length;i++){ 
					if(code_Values[i].type == "checkbox") 
					{ 
						code_Values[i].checked = false; 
					} 
				} 
			}

		});

jQuery版本，在bootstrap-datatable中第一次可以，后面几次都不行

<script type="text/javascript">
	$(function() {
		$("#checkAll").click(function() {
			$('input[name="subBox"]').attr("checked", this.checked);
		});
		var $subBox = $("input[name='subBox']");
		$subBox.click(function() {
			$("#checkAll").attr("checked",
				$subBox.length == $("input[name='subBox']:checked").length ? true : false);
		});
	});
</script>

飞鱼武士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox全选和反选

HTML页面：jQuery实现CheckBox全选、全不选<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"> 全选 <input name="subBox" type="checkbox" />项1 项2 <input name="subBox" t
复制链接

扫一扫

专栏目录