关闭

checkbox全选和反选

标签: checkbox
302人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:74713次
    • 积分:1300
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:106篇
    • 译文:0篇
    • 评论:4条
    最新评论