用JavaScript实现复选框的全选或全不选效果

最新推荐文章于 2023-02-21 15:38:18 发布

banmengyou

最新推荐文章于 2023-02-21 15:38:18 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/banmengyou/article/details/80374349

版权

这周我们学习了创建一个按钮，在单击时把爱好全都全上，如果此时复选框都选中时，那么此时按钮就会变为全不选，这个功能通过使用getElementsByName来获取复选框的Name，在通过判断是否被选中，来改变按钮上的字。其代码如下：

t<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function selectAll(){
var allCheck=document.getElementsByName('favorite');
for (var i = 0; i < allCheck.length; i++) {
allCheck[i].checked=!allCheck[i].checked;
}
var desc=document.getElementById("btn").value;
if(desc=="全选"){
document.getElementById('btn').value="全不选"
}else{
document.getElementById('btn').value="全选"
}
}
</script>
</head>
<body>
<p>请选择你的爱好</p>
<input type="checkbox" name="favorite">游泳
<input type="checkbox"name="favorite">爬山
<input type="checkbox"name="favorite">跑步
<br/>
<input type="checkbox"name="favorite">读书
<input type="checkbox"name="favorite">音乐
<input type="checkbox"name="favorite">健身
<br>
<input type="button" id="btn" value="全选" οnclick="selectAll()">
</body>
</html>

banmengyou

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现复选框的全选或全不选效果

这周我们学习了创建一个按钮，在单击时把爱好全都全上，如果此时复选框都选中时，那么此时按钮就会变为全不选，这个功能通过使用getElementsByName来获取复选框的Name，在通过判断是否被选中，来改变按钮上的字。其代码如下：t&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫