Javascript 实例--全选反选

最新推荐文章于 2025-08-22 11:32:18 发布

iteye_19838

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_19838/article/details/82568381

Javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现批量选择、取消选择及反转选择复选框的方法。该方法适用于表单中拥有多个复选框的情况，通过简单的脚本即可轻松实现对复选框的选择控制。

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

<html>
<head></head>
<body>
<script>
for(var i=0; i<20; i++){
	document.write('<input type="checkbox" name="vol[]" />aaaa <br>');
	<!--使用[]可以将变量以数组的形式传递给后台-->
}
</script>
<br>
<br>
<a href="javascript:sall()">select all</a> 
<a href="javascript:nall()">not select all</a> 
<a href="javascript:fall()">select unselect</a> 
<br>
<br>
<label for="ss"><input id="ss" type="checkbox" onclick="selectall(this)">select all</input> </label>
<!--使用label for属性将label中的内容绑定到一起-->

<script>
var vols = document.getElementsByName('vol[]'); 

function sall(){	
	for(var i=0; i<vols.length; i++){
		vols[i].checked=true;
	}
}

function nall(){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=false;
	}
}

function fall(){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=!(vols[i].checked);
	}
}

function selectall(obj){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=obj.checked;
	}
}

</script>


</body>
</html>