根据css 样式实现全选

最新推荐文章于 2023-05-17 15:38:46 发布

shrimpma

最新推荐文章于 2023-05-17 15:38:46 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ext3.2.1+php 开发 javascript+jsFrame

本文链接：https://blog.youkuaiyun.com/shrimpma/article/details/9031995

ext3.2.1+php 开发同时被 2 个专栏收录

14 篇文章

订阅专栏

javascript+jsFrame

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现全选或取消全选多个复选框的方法。通过自定义函数`checkAll`和`getByClass`，可以轻松地控制具有特定类名的所有复选框的状态。此功能常用于网页表单中批量操作选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>cyberobject.com - checkbox seclet or disselect all</title>
<script language="JavaScript">

function getByClass(cla, obj){
		var obj = obj || document, arr = [];
	 
		if(document.getElementsByClassName){
						return document.getElementsByClassName(cla);
		} else {
			var all = obj.getElementsByTagName('*');
					
			for(var i = 0, len = all.length; i < len; i++){
							if(all[i].className.match(cla) != null) arr.push(all[i]);
			}
					
			return arr;
		}
}
function checkAll(cla,obj){
	var checkboxs = getByClass(cla);
	var len = checkboxs.length;
	for(i=0;i<len;i++){
		checkboxs[i].checked = obj.checked;
	}
}		
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
    <input type="checkbox" name="zone_checkbox" value="zone_checkbox" onClick="checkAll('aa',this)">全选
</p>
<p>   
    <input type="checkbox" name="checkbox" id="checkbox" class="aa" value="1">1 <br>
    <input name="checkbox" type="checkbox" id="checkbox" class="aa" value="2">2 <br>
    <input name="checkbox" type="checkbox" id="checkbox" class="aabb" value="3">3 <br>
    <input name="checkbox" type="checkbox" id="checkbox" class="aa"  value="4">4 <br>
    <input name="checkbox" type="checkbox" id="checkbox" class="aa" value="5">5 <br>
    <input name="checkbox" type="checkbox" id="checkbox" class="aa"  value="6">6
</p>
<p>
    <input type="submit" name="Submit" value="清除">
</p>
</form>
</body>
</html>