js实现checkbox全选、不选与反选的方法


Posted in Javascript onFebruary 09, 2015

本文实例讲述了js实现checkbox全选、不选与反选的方法。分享给大家供大家参考。具体分析如下:

一、思路:

1. 获取元素

2. 给全选 不选 反选添加点击事件

3. 用for循环checkbox

4. 把checkbox的checked设置为true即实现全选

5. 把checkbox的checked设置为false即实现不选

6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。

二、html代码:

<input type="button" value="全选" id="sele"/>
<input type="button" value="不选" id="setinterval"/>
<input type="button" value="反选" id="clear"/>
<div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

三、js代码:

<script>
window.onload=function(){

  var sele=document.getElementById('sele');//获取全选
  var unsele=document.getElementById('setinterval');//获取不选
  var clear=document.getElementById('clear');//获取反选
  var checkbox=document.getElementById('checkboxs');//获取div
  var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
   sele.onclick=function(){
    for(i=0;i<checked.length;i++){
    checked[i].checked=true
          }
     }

//不选
    unsele.onclick=function(){
      for(i=0;i<checked.length;i++){
       checked[i].checked=false
          }
      }
//反选
    clear.onclick=function(){
       for(i=0;i<checked.length;i++){
        if(checked[i].checked==true){
        checked[i].checked=false
         } 
   else{
     checked[i].checked=true
       }
       }
      }
}
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
angularJS中router的使用指南
Feb 09 #Javascript
javascript实现按回车键切换焦点
Feb 09 #Javascript
jquery中ajax使用error调试错误的方法
Feb 08 #Javascript
JQuery中extend的用法实例分析
Feb 08 #Javascript
jQuery中noConflict()用法实例分析
Feb 08 #Javascript
jquery实现聚光灯效果的方法
Feb 06 #Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 #Javascript
You might like
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
索趣科技的答案
2007/02/07 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python flask中动态URL规则详解
2019/11/22 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
工程师岗位职责
2013/11/08 职场文书
工程部经理岗位职责
2013/12/08 职场文书
小学家长会邀请函
2014/01/23 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
贷款委托书怎么写
2014/08/02 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Java 死锁解决方案
2022/05/11 Java/Android
Redis Lua脚本实现ip限流示例
2022/07/15 Redis