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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
20个最新的jQuery插件
Jan 13 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
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
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
在Django中实现添加user到group并查看
2019/11/18 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python中@contextmanager实例用法
2021/02/07 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
质量工程师岗位职责
2013/11/16 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
村级四风对照检查材料
2014/08/24 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android