javascript怎么设置全选
程序员文章站
2022-03-03 14:17:18
...
javascript设置全选的方法：首先创建一个HTML示例文件；然后添加script标签并创建js代码；最后通过循环遍历每个checkbox对象，将其checked属性设置为true实现全选功能即可。
本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
javascript怎么设置全选？
JavaScript实现全选：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox的全选和取消全选</title>
<script type="text/javascript">
//页面加载的时候,所有的复选框都是未选中的状态
function checkOrCancelAll(){
//1.获取checkbox的元素对象
var chElt=document.getElementById("chElt");
//2.获取选中状态
var checkedElt=chElt.checked;
//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
var allCheck=document.getElementsByName("interest");
//4.循环遍历取出每一个复选框中的元素
var mySpan=document.getElementById("mySpan");
if(checkedElt){
//全选
for(var i=0;i<allCheck.length;i++){
//设置复选框的选中状态
allCheck[i].checked=true;
}
mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i=0;i<allCheck.length;i++){
allCheck[i].checked=false;
}
mySpan.innerHTML="全选";
}
}
</script>
</head>
<body>
<input type="checkbox" id="chElt" οnclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/>
学习<input type="checkbox" name="interest" value="study"/>
阅读<input type="checkbox" name="interest" value="read"/>
运动<input type="checkbox" name="interest" value="sport"/>
旅行<input type="checkbox" name="interest" value="travel"/>
绘画<input type="checkbox" name="interest" value="draw"/>
音乐<input type="checkbox" name="interest" value="music"/>
</body>
</html>
Checkbox 对象：
Checkbox 对象代表一个 HTML 表单中的一个选择框。
在 HTML 文档中 <input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。
您可以通过遍历表单的 elements[] 数组来访问某个选择框，或者通过使用 document.getElementById() 。
checked 属性：
checked 属性设置或返回 checkbox 是否应被选中。
语法
checkboxObject.checked=true|false
说明
该属性保存了 checkbox 的当前状态，不管何时，这个值发生变化的时候，onclick 事件句柄就会触发（也可能触发 onchange 事件句柄）。
【推荐学习：javascript高级教程】
以上就是javascript怎么设置全选的详细内容，更多请关注其它相关文章！
推荐阅读
-
复选框全选与全不选操作实现思路_javascript技巧
-
iOS15.4怎么设置口罩解锁 iOS15.4支持戴口罩解锁吗
-
毫无排版和缩进的 JavaScript 代码，怎么阅读？
-
javascript - 正则贪婪模式,怎么搞清楚?总是一下子把后面的都给匹配上了
-
javascript - 用户发帖应用开发中，用户异步上传了图片，但最终帖子没发布，那么上传的图不就没有用了吗怎么处理这种情况？
-
js中设置元素class的三种方法小结_javascript技巧
-
网页标题前面的logo怎么设置
-
不知大家遇到过这种问题么，一个层宽度设为100%，并设置背景图片，在浏览器中浏览，缩小窗口到滚动条出现，然后拖动滚动条到右侧，右侧的区域变成空白，怎么解决？_html/css_WEB-ITnose
-
javascript - 怎么实现微软edge浏览器兼容性提示？
-
JavaScript怎么求数组中位数