js教程 javascript怎么设置全选

 所属分类:web前端开发

 浏览:144次-  评论: 0次-  更新时间:2022-06-07
描述:这是一篇js教程 javascript怎么设置全选的说明内容,如果你想学习查找类似的文章,可以进入web前端开发获得最新优质资料。 javascript设置...
这是一篇js教程 javascript怎么设置全选的说明内容,如果你想学习查找类似的文章,可以进入web前端开发获得最新优质资料。

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怎么设置全选的详细内容,更多请关注zzsucai.com其它相关文章!

 标签:
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!