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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
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简单复制文件的方法
2016/05/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
解放web程序员的输入验证
2006/10/06 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python实现石头剪刀布程序
2021/01/20 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
有趣的广告词
2014/03/18 职场文书
商业融资计划书
2014/04/29 职场文书
师范生求职信
2014/06/14 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
贫困证明怎么写
2015/06/16 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL