JavaScript前端按钮复选框

最新推荐文章于 2025-08-09 12:21:07 发布

爱笑的宝宝

最新推荐文章于 2025-08-09 12:21:07 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript前端文章标签： JavaScript前端按钮复选框

本文链接：https://blog.csdn.net/abc15156714976/article/details/78095447

JavaScript前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用按钮控制一组复选框的方法，通过JavaScript实现了全选与反选的功能。示例代码展示了如何获取DOM元素、绑定点击事件以及根据按钮状态改变复选框的状态。

实现按钮的复选框

示例代码如下：

<html>

<head>
<meta charset="UTF-8">
<title></title>

<script>
window.onload = function() {
selAll = document.getElementById("selAll");
hobbys = document.getElementsByName("hobby");
fx = document.getElementById("fx");

//全选事件
selAll.onclick = function() {
//全选
if(selAll.checked == true) {
for(var i = 0; i < hobbys.length; i++) {
hobbys[i].checked = true;
}
} else {
for(var i = 0; i < hobbys.length; i++) {
hobbys[i].checked = false;

}
}
}

//反选
fx.onclick = function(){

for(var i=0; i<hobbys.length; i++){
var b = hobbys[i];
if(b.checked == true){
b.checked = false;
}else{
b.checked = true;
}

}
}

}
</script>
</head>

<body>

<input type="checkbox" name="" id="selAll" />全选
<button id="fx">反选</button>
<br>
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />乒乓球
<input type="checkbox" name="hobby" />羽毛球

</body>

</html>