JS操作input标签属性checkbox全选的实现代码


Posted in Javascript onMarch 02, 2017

废话不多说了,具体代码如下所示:

<html>
<head>
< >
function selectAll(){
 var checklist = document.getElementsByName ("selected");//获取所有name值为selected的标签
 if(document.getElementById("controlAll").checked){//判断当id为controlAll的标签是否被选中
 for(var i=0;i<checklist.length;i++){ 
  checklist[i].checked = true;//当被选中时,则获取所有name值为selected的标签都被选中
 } 
 }else{
 for(var j=0;j<checklist.length;j++){
  checklist[j].checked = false;//当不被选中时,则获取所有name值为selected的标签都不被选中
 }
 }
}
</ >
</head>
<body>
<form>
<input ="selectAll()" type="checkbox" name="controlAll" style="controlAll" id="controlAll"/>全选<br>
1:<input ="heheda()" type="checkbox" name="selected" value="1"/><br>
2:<input ="heheda()" type="checkbox" name="selected" value="2"/><br>
3:<input ="heheda()" type="checkbox" name="selected" value="3"/><br>
4:<input ="heheda()" type="checkbox" name="selected" value="4"/><br>
5:<input ="heheda()" type="checkbox" name="selected" value="5"/><br>
6:<input ="heheda()" type="checkbox" name="selected" value="6"/><br>
</form>
< type="text/ ">
function heheda(){
 var controlAll = document.getElementById("controlAll");//获取id值为controlAll的标签
 var checklists = document.body.querySelectorAll("input[type='checkbox']").length;//获取所有格式为checkbox的input标签的数量
 var selectedLength=document.body.querySelectorAll("input[name=selected]:checked").length;//获取所有name值为selected,并且已经被选中的input标签的数量
 if(controlAll.checked){//判断当id为controlAll的标签是否被选中
   controlAll.checked = false;//当被选中时,则自动取消id为controlAll的标签选中
 }else{
  if(selectedLength == checklists-1){//当不被选中时,判断当获取所有name值为selected,并且已经被选中的input标签的数量 与 获取所有格式为checkbox的input标签的数量-1 是否相等
  controlAll.checked = true;//如果相等,则自动选中id为controlAll的标签
  }
 }
 }
</ >
</body>
</html>

以上所述是小编给大家介绍的JS操作input标签属性checkbox全选的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
防止文件缓存的js代码
Jan 10 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
Vue实现简单的留言板
Oct 23 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 #Javascript
原生js仿浏览器滚动条效果
Mar 02 #Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 #Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 #Javascript
浅谈Vue.js
Mar 02 #Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 #Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 #Javascript
You might like
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
destoon常用的安全设置概述
2014/06/21 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP中串行化用法示例
2016/11/16 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
javascript事件模型实例分析
2015/01/30 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
python函数参数*args**kwargs用法实例
2013/12/04 Python
详解Python中类的定义与使用
2017/04/11 Python
Django密码系统实现过程详解
2019/07/19 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
python def 定义函数,调用函数方式
2020/06/02 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
编辑个人求职信范文
2013/09/21 职场文书
搞笑车尾标语
2014/06/23 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
关于做家务的心得体会
2016/01/23 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python