根据css 样式实现全选

本文介绍了一种使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值