【javascript】checkbox——类似邮箱全选功能

现在很多邮箱都有全选的功能，我也做了个练练手。

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"><title>checkbox</title>
</head>
<body><input type="checkbox" name="btn" id="btn"/><label for="btn">全选</label><br/><input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/><input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/><input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/><input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/><input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/><input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/><input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">选项7</label><br/><input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">选项8</label><br/><input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">选项9</label><br/><input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">选项10</label><br/>
</body>
</html>
<script type="text/javascript">
window.onload = function(){var oBtn = document.getElementById('btn');var oInput = document.getElementsByName('choose');for(var i = 0;i < oInput.length; i++){oInput[i].onclick = function(){if(this.checked){var allCheck = true;for(var j = 0;j < oInput.length; j++){if(!(oInput[j].checked)){allCheck = false;}};if(allCheck){oBtn.checked = true;}else{oBtn.checked = false;}}else{oBtn.checked = false;}}};//全选
    oBtn.onclick = function(){if(oBtn.checked){for(var i = 0;i < oInput.length; i++){oInput[i].checked = true;}} else {for(var i = 0;i < oInput.length; i++){oInput[i].checked = false;}}};
}
</script>

只做了全选的功能，反选的功能还没有做，以后补上。由于水平有限，感觉以上代码还可以简化，求指点。

【javascript】checkbox——类似邮箱全选功能相关推荐

ListView加checkBox可以实现全选等功能
1.效果图 2.LIteView_item布局 <?xml version="1.0" encoding="utf-8"?> <Relativ ...
【javascript】js实现表格全选功能
效果: 一个表格实现单选功能和全选功能. <!DOCTYPE html> <html lang="en"> <head><meta ch ...
layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...
JS全选功能代码优化
JS全选功能代码优化原文:JS全选功能代码优化 JS全选功能代码优化最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想用另一种模式来编写JS代码,所以针对之 ...
vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。
一.Javacript设置全选的方法:首先创建一个HTML示例文件:然后添加script标签并创建js代码:最后通过循环遍历每个checkbox对象,将其checked属性设置为true实现全选功能即 ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
java记事本复制粘贴_Java Swing 如何实现记事本中“编辑”菜单下的剪切，复制，粘贴，删除，全选功能...
这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l) 给JButton添加一个鼠标点击监听器l ...
jQuery之全选功能
例子:点击全选,将所有checkbox选中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

【javascript】checkbox——类似邮箱全选功能

【javascript】checkbox——类似邮箱全选功能相关推荐

最新文章

热门文章