javascript实现复选框全选或反选


Posted in Javascript onFebruary 04, 2017

以下是用原生js实现的复选框全选/反选的实现,选中checkbox的时候,实现全选的效果,并且样式发生改变。
代码最简洁,js行为优化版,复制粘贴即可使用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>复选框全选/反选效果实现</title>
 <style>
  body,dl,dt,dd,p{margin:0;padding:0;}
  body{font-family:Tahoma;font-size:12px;}
  label,input,a{vertical-align:middle;}
  label{padding:0 10px 0 5px;}
  a{color:#09f;text-decoration:none;}
  a:hover{color:red;}
  dl{width:120px;margin:10px auto;
  border-radius:5px;background:#fafafa;}
  dt{padding-bottom:10px;
  border-bottom:1px solid #666;}
  dt label{font-weight:700;}
  p{margin-top:10px;}
 </style>
</head>
<body>
 <dl>
 <dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
 <dd>
  <p><input type="checkbox" name="item" /><label>选项(一)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(二)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(三)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(四)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(五)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(六)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(七)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(八)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(九)</label></p>
  <p><input type="checkbox" name="item" /><label>选项(十)</label></p>
 </dd> 
</dl>
<script type="text/javascript">
(function(){
 var aInput = document.getElementsByTagName("input");
 var aBack = document.getElementsByTagName("a")[0];
 var aLabel = document.getElementsByTagName("label")[0];
 var allInput = aInput[0];
  //全选设置,当点击事件发生时候,如果被选择全部选中,并且文本内容改变
  allInput.onclick=function(){
   if(aInput[0].checked){
   for(var i=1;i<aInput.length;i++){
    aInput[i].checked = true;
   }
    aLabel.innerHTML = "全不选";
   }
   else{
    for(var i=1;i<aInput.length;i++){
    aInput[i].checked = false;
    }
    aLabel.innerHTML = "全选";
   }

  }
  //反选设置,选中的内容是原本内容的取反
  aBack.onclick=function(){
   for(var i=1;i<aInput.length;i++){
    aInput[i].checked = !aInput[i].checked;
   }
  }
})();
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 #Javascript
javascript表单正则应用
Feb 04 #Javascript
JS中的phototype详解
Feb 04 #Javascript
详解JavaScript RegExp对象
Feb 04 #Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 #Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 #Javascript
纯js模仿windows系统日历
Feb 04 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
战友聚会邀请函
2014/01/18 职场文书
预备党员表决心书
2014/03/11 职场文书
行政部岗位职责范本
2014/03/13 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
会计演讲稿范文
2014/05/23 职场文书
2014年个人委托书范本
2014/10/13 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2014年个人年终总结
2015/03/09 职场文书
销售督导岗位职责
2015/04/10 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript