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重建星际争霸
Dec 22 Javascript
CCPry JS类库 代码
Oct 30 Javascript
一个网马的tips实现分析
Nov 28 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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 UTF8 文件的签名问题
2009/10/30 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
详解react组件通讯方式(多种)
2020/05/06 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python开发游戏的前期准备
2019/05/05 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
现金会计岗位职责
2013/12/05 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫