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

最新推荐文章于 2023-08-15 20:48:01 发布

原创最新推荐文章于 2023-08-15 20:48:01 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了点击全选时“全选”变为全不选，点击全不选时“全不选”变为全选的效果，并提及了实现代码以及实现反选的内容，聚焦于前端交互功能的实现。

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

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

实现代码：

<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;
	}
}