`

Javascript 实例--全选反选

 
阅读更多 

<html>
<head></head>
<body>
<script>
for(var i=0; i<20; i++){
	document.write('<input type="checkbox" name="vol[]" />aaaa <br>');
	<!--使用[]可以将变量以数组的形式传递给后台-->
}
</script>
<br>
<br>
<a href="javascript:sall()">select all</a> 
<a href="javascript:nall()">not select all</a> 
<a href="javascript:fall()">select unselect</a> 
<br>
<br>
<label for="ss"><input id="ss" type="checkbox" onclick="selectall(this)">select all</input> </label>
<!--使用label for属性将label中的内容绑定到一起-->

<script>
var vols = document.getElementsByName('vol[]'); 

function sall(){	
	for(var i=0; i<vols.length; i++){
		vols[i].checked=true;
	}
}

function nall(){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=false;
	}
}

function fall(){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=!(vols[i].checked);
	}
}

function selectall(obj){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=obj.checked;
	}
}

</script>


</body>
</html>
分享到：
| Javascript 正则表达式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【JavaScript源代码】jQuery实现全选反选操作案例.docx

    　本文实例为大家分享了jQuery实现全选反选操作的具体代码，供大家参考，具体内容如下　全选+反选　可根据控制台结合查看结果　&lt;!DOCTYPE html&gt;　　&lt;html lang="en"&gt;　　&lt;head&gt;　　 &lt;meta charset="UTF-8"&gt;　...

    javaScript实现复选框全选反选事件详解

    本文实例为大家分享了javaScript实现复选框全选反选的具体代码，供大家参考，具体内容如下 代码 &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;meta name=viewport content=initial-scale=1.0, ...

    【JavaScript源代码】JavaScript实现表单全选或反选效果.docx

    　本文实例为大家分享了JavaScript实现表单全选或反选的具体代码，供大家参考，具体内容如下　表单中常常会用到checkbox复选框，通过复选框做出的列表全选或全不选的效果也是很常见的，比如购物车的商品列表，所以本...

    javascript实现简单的全选和反选功能

    全选反选&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=button value=全选 id=all&gt; &lt;input type=button value=反选 id=reverse&gt; &lt;input type=checkbox id=flagCheck&gt;

    JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法。分享给大家供大家参考。具体分析如下： 通过JS代码对列表框进行全选和反选是经常要操作的，非常具有实用价值。 function listboxSelectDeselect(list...

    javascript实现可全选、反选及删除表格的方法

    主要介绍了javascript实现可全选、反选及删除表格的方法,实例展示了javascript针对表格全选、反选、删除、隔行变色、删除提示等常用技巧,非常具有实用价值,需要的朋友可以参考下

    JavaScript-Web素材实例

    JS横向弹性相册代码;MagicBox1.0;GT.Grid JSON版Demo;标签导航;弹出动态展开窗口;网页特效复选框全选、全不选和反选

    javascript 全选/反选,取消选择效果

    第一个checkbox实现了 全选 反选 最后个checkbox实现了 取消选择 这里只是做一个 JS实例罢了。 这段HTML并没有 实际的价值。 javascript 全选/反选效果。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    javascript实现checkBox的全选，反选与赋值

    主要介绍了javascript实现checkBox的全选，反选与赋值的方法，以实例形式详细分析了实现的思路及对应的html与js代码的实现过程

    程序天下:JavaScript实例自学手册

    10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键...

    《程序天下：JavaScript实例自学手册》光盘源码

    10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键...

    JavaScript网页特效范例宝典源码

    实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...

    前端学习案例合集，各种前端小案例实现源码.zip

    20-商品全选与反选 21-jQuery-效果动画案例 22-淘宝搜索推荐案例 23-vue-商品管理 24-ajax(原生)-图书添加删除案例 25-JQuery-ajax 实现图书添加删减 26-ajax-评论案例 27-ajax-template 获取新闻列表 28-文件上传+...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例...

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

    主要介绍了javascript中DOM复选框选择用法,实例分析了javascript操作复选框实现全选与反选的相关技巧,需要的朋友可以参考下

    PHP开发实战1200例源码

    实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例173 实现复选框中的全选、反选和不选 208 实例174 隐藏域提交用户的ID值 210 实例175 图像域替代提交按钮 211 实例176 跳转菜单实现页面跳转 213 实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例...

    javascript中checkbox使用方法实例演示

    本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下： 运行效果截图如下： （1）全选 （2）部分选 （3）反选（全不选） 具体代码如下： &lt;!DOCTYPE ...

Magicbox
Global site tag (gtag.js) - Google Analytics