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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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 Static关键字实用方法
2010/06/04 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
JS中递归函数
2016/06/17 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python import用法以及与from...import的区别
2015/05/28 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python如何查看微信消息撤回
2018/11/27 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
html5的localstorage详解
2017/05/09 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
自动化专业毕业生自荐信
2013/11/01 职场文书
开学典礼感言
2014/02/16 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
小学英语课教学反思
2016/02/15 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript