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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
浅谈Node模块系统及其模式
Nov 17 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 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
一个查看session内容的函数
2006/10/09 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python3 logging日志封装实例
2020/04/08 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
中文专业自荐书
2014/06/29 职场文书
法定代表人资格证明书
2014/09/11 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
国庆节新闻稿
2015/07/17 职场文书
运动会1000米加油稿
2015/07/21 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android