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 相关文章推荐
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
JS实现4位随机验证码
Oct 19 Javascript
vue中template的三种写法示例
Oct 21 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的字符串用法小结
2010/06/08 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
python 合并文件的具体实例
2013/08/08 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
国家励志奖学金获奖感言
2014/01/09 职场文书
元旦晚会感言
2014/03/12 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
图书室标语
2014/06/21 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
百年校庆感言
2015/08/01 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书