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 相关文章推荐
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
js实现列表按字母排序
Aug 11 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
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js document.write()使用介绍
2014/02/21 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
联想C++笔试题
2012/06/13 面试题
后勤自我鉴定
2013/10/13 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
街道社区活动报告
2015/02/05 职场文书
500字小学生检讨书
2015/02/19 职场文书
文明礼貌主题班会
2015/08/14 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技