js实现复选框的全选、全不选、反选

最新推荐文章于 2023-07-18 11:18:07 发布

sunqiana

最新推荐文章于 2023-07-18 11:18:07 发布

阅读量190

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sunaxp/article/details/90342856

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点击全选效果如下，“全选”变全不选

点击全不选，“全不选”变全选

实现代码：

<form action="">
		<input type="checkbox" name="interest"><label for="">游泳</label>
		<input type="checkbox" name="interest"><label for="">读书</label>
		<input type="checkbox" name="interest"><label for="">写字</label>
		<input type="checkbox" name="interest"c><label for="">唱歌</label>
		<input type="button" id ="btn1" value="全选" onclick="checkInterest()">
		<input type="button" value="反选" onclick="checkInterest1()">
</form>

//全选和全不选
var flag=true;
function checkInterest(){
	var interest = document.getElementsByName("interest");
	for(i=0;i<interest.length;i++){
		interest[i].checked=flag;
	}
	if (flag) {
		document.getElementById("btn1").value="全不选";
	}else {
		document.getElementById("btn1").value="全选";
	}
	flag=!flag;//开关变量
}

实现反选：

//反选
function checkInterest1(){
	var interest = document.getElementsByName("interest");
	for(i=0;i<interest.length;i++){
		interest[i].checked=!interest[i].checked;
	}
}