<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<p><input type="checkbox" name="">1</p>
<p><input type="checkbox" name="">2</p>
<p><input type="checkbox" name="">3</p>
<p><input type="checkbox" name="">4</p>
</form>
<button onclick="getAll(0)">全选</button>
<button onclick="getAll(1)">全不选</button>
<button onclick="getAll(2)">反选</button>
<script type="text/javascript">
// 选中三个形式:1.用户点击(√) 2.在标签上添加checked属性 3.js中,checked=true
// 注意,返回的是多个元素,要用getElementsByTagName,加了s
let input = document.getElementsByTagName('input')
let but = document.getElementsByTagName('button')
console.log(input)
// but[0].onclick = function() {
// for(let i=0;i<input.length;i++){
// input[i].checked = true
// }
// }
// but[1].onclick = function() {
// for(let i=0;i<input.length;i++){
// input[i].checked = false
// }
// }
// but[2].onclick = function() {
// for(let i=0;i<input.length;i++){
// input[i].checked = !input[i].checked
// }
// }
// 封装为函数,进行优化
function getAll(num){
for(let i=0;i<input.length;i++){
if(num==0){
input[i].checked = true;
}else if(num==1){
input[i].checked = false;
}else{
input[i].checked = !input[i].checked;
}
}
}
</script>
</body>
</html>
全选,反选,全不选
转载文章标签 i++ html javascript 全不选 封装 文章分类 JavaScript 前端开发
上一篇:早中晚显示不同问候语和图片
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
-
Jquery04-练习-全选,全不选,反选
Jquery练习全选,全不选,反选文章目录Jquery练习给全选绑定单击事件给全不选绑
js dom vue javascript 单击事件 -
函数全不选js实现全选、全不选、反选
在改章节中,我们主要介绍函数全不选的内容,自我感觉有个不错的建议和大家分享下不多说,直接上代码~每日一道理 一个安静的夜晚,我独自一人,有些空虚,有些凄凉。坐在星空下,抬头仰望美丽天空,感觉真实却由虚幻,闪闪烁烁,似乎看来还有些跳动。美的一切总在瞬间,如同“海市蜃楼”般,也只是刹那间的一闪而过,当天空变得明亮,而这星星也早已一同退去……<meta charset="gbk"><script language="javascript">//全选函数function selectAll(){ obj=document.getEleme
全不选 i++ javascript 一闪而过 前端 数据 数据库 编程语言