javascript中DOM复选框选择用法实例
更新时间：2015年05月14日 12:34:26 作者：永远爱好写程序
这篇文章主要介绍了javascript中DOM复选框选择用法,实例分析了javascript操作复选框实现全选与反选的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了js实现不提交表单获取单选按钮值的方法,涉及javascript鼠标事件及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
这篇文章主要介绍了详解使用grunt完成requirejs的合并压缩和js文件的版本控制 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。这篇文章主要介绍了使用Bootstrap做一个朝代历史表,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了js如何判断用户是在PC端和还是移动端访问,需要的朋友可以参考下2014-04-04
javascript 表格左右收缩实现代码。2009-07-07
这篇文章主要介绍了MVVM 双向绑定的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
在许多编程语言中,Object和Map都是用于存储键值对的数据结构,下面这篇文章主要给大家介绍了关于Javascript中Object和Map之间的转换方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了JS如何生成一个不重复的ID的函数，非常不错，具有参考借鉴价值，需要的朋友参考下2016-12-12
这篇文章主要介绍了javascript实现画不相交的圆，这个也是阿里巴巴的笔试题，只不过忘记当时是不是要求必须用canvas来实现，下篇文章再写吧。2015-04-04
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
这篇文章主要介绍了鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论