javascript中DOM复选框选择用法实例


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript中DOM复选框选择用法。分享给大家供大家参考。具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框全选全清和反选</title>
<script type="text/javascript">
//取得所有的复选框对象数组
function GetAllCheckBox() {
  var div = document.getElementById("Balls");
  var inputs = div.getElementsByTagName("input");
  //定义复选框数组,用来返回
  var checkboxs = new Array();
  var nIndex = 0;
  for (var i = 0; i < inputs.length; i++) {
 //通过type是否为checkbox来判断复选框
 if (inputs[i].type == "checkbox") {
   checkboxs[nIndex] = inputs[i];
   nIndex++;
 }
  }
  return checkboxs;
}
//全选
function selAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 checkboxs[i].checked = true;
  }
}
//全清
function clearAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 checkboxs[i].checked = false;
  }
}
//反选
function reverseAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 if (checkboxs[i].checked == true) {
   checkboxs[i].checked = false;
 }
 else {
   checkboxs[i].checked = true;
 }
  }
}
</script>
</head>
<body>
<div id="Balls">
<input type="checkbox" id="c1" /><label for="c1">足球</label>
<input type="checkbox" id="c2" /><label for="c2">台球</label>
<input type="checkbox" id="c3" /><label for="c3">乒乓球</label>
<br />
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全清" onclick="clearAll()" />
<input type="button" value="反选" onclick="reverseAll()" />
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
简单的js计算器实现
Oct 26 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
JavaScript字符串对象
Jan 14 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
详解redux异步操作实践
Aug 15 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
JS对字符串编码的几种方式使用指南
May 14 #Javascript
jQuery的基本概念与高级编程
May 14 #Javascript
javascript实现简单的省市区三级联动
May 14 #Javascript
javascript实现仿腾讯游戏选择
May 14 #Javascript
JavaScript实现Flash炫光波动特效
May 14 #Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 #Javascript
javascript搜索框效果实现方法
May 14 #Javascript
You might like
swfupload 多文件上传实现代码
2008/08/27 PHP
php 数组使用详解 推荐
2011/06/02 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
js a标签点击事件
2017/03/30 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
Python中的装饰器用法详解
2015/01/14 Python
Python 探针的实现原理
2016/04/23 Python
深入学习Python中的装饰器使用
2016/06/20 Python
python实现停车管理系统
2018/11/30 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python通过cython加密代码
2020/12/11 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
后勤部长岗位职责
2013/12/14 职场文书
高二生物教学反思
2014/01/27 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
母校寄语大全
2014/04/10 职场文书
党员对照检查材料
2014/09/22 职场文书
鲁迅故居导游词
2015/02/05 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python