js函数

复制代码
代码如下:
<script type="text/javascript">

function checkAll(name) {
var el =
document.getElementsByTagName('input');
var len = el.length;
for(var
i=0; i<len; i++) {
if((el[i].type=="checkbox") &&
(el[i].name==name)) {
el[i].checked = true;
}
}
}
function
clearAll(name) {
var el = document.getElementsByTagName('input');
var
len = el.length;
for(var i=0; i<len; i++) {

if((el[i].type=="checkbox") && (el[i].name==name)) {

el[i].checked = false;
}
}
}
</script>

html

复制代码
代码如下:
<input type="checkbox" name="test"
value="" onclick="if(this.checked==true) { checkAll('test'); } else {
clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test"
value="a" /> a
<input type="checkbox" name="test" value="b" /> b

<input type="checkbox" name="test" value="c" /> c
<input
type="checkbox" name="test" value="d" /> d
<input type="checkbox"
name="test" value="e" /> e
<input type="checkbox" name="test"
value="f" /> f
<input type="checkbox" name="test" value="g" /> g

<br />
<input type="checkbox" name="num" value=""
onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }"
/> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1

<input type="checkbox" name="num" value="2" /> 2
<input
type="checkbox" name="num" value="3" /> 3
<br />
<br />

<input type="button" value="选择所有的字母" onclick="checkAll('test')" />
<input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br
/>
<br />
<input type="button" value="选择所有的数字"
onclick="checkAll('num')" /> <input type="button" value="清空选中的数字"
onclick="clearAll('num')" /> 

Javascript实现CheckBox的全选与取消全选的代码(转)的更多相关文章

  1. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  2. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  3. CheckBox全选、取消全选

    关于CheckBox全选取消全选 //全选 $("#SysAllSelectedID").click(function () { $("[name=SysCheckbox ...

  4. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  5. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  6. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

  7. jquery购物车全选,取消全选,计算总金额

    这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...

  8. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  9. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  10. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

随机推荐

  1. Account Team使用说明

    Account  Team Account Team 以下简称客户小组. 背景介绍 帐户是与您的业务相关的公司和组织,每个帐户都存储了商家名称.地址和电话号码等信息.可以针对每个帐户存储相关的联系人. ...

  2. Abot爬虫和visjs

    1. 引言 最近接触Abot爬虫也有几天时间了,闲来无事打算从IMDB网站上爬取一些电影数据玩玩.正好美国队长3正在热映,打算爬取漫威近几年的电影并用vis这个JS库呈现下漫威宇宙的相关电影. Abo ...

  3. AS3语言注意事项汇总

    1. 在IE中,主DisplayObject加入stage后,可能其大小还是0,这时可以通过监听resize信息,在主DisplayObject获得正确的大小后,运行主要程序.需要注意的是在这个过程中 ...

  4. 为PetaPoco添加实体模板

    Brad为我们提供了T4模板,因为公司一直在使用CodeSmith,故为其写了一个CodeSmith的模板,代码如下: <%-- Name:EntityTemplates Author: Des ...

  5. Pet Shop4.0

    http://blog.csdn.net/RainyLin/article/details/1769947

  6. Linux 休眠,挂起(待机),关机等几个命令的区别及如何实现;如何启用Ubuntu的休眠模式

    这里对linux 的几个命令整理下,有:休眠,挂起,待机,关机等几个命令的区别及如何实现. 休眠是一种更加省电的模式,它将内存中的数据保存于硬盘中,所有设备都停止工作.当再次使用时需按开关机键,机器将 ...

  7. QT mainwindow四件套

    最近在学习QT.下面总结一下mainwindow的设置步骤. 使用的平台为vs2013+qt5.3.2+qt-vs-addin1.2.3 1)安装软件 首先安装vs2013,这个不多介绍. 然后安装q ...

  8. 一步一步学习underscore的封装和扩展方式

    前言 underscore虽然有点过时,这些年要慢慢被Lodash给淘汰或合并. 但通过看它的源码,还是能学到一个库的封装和扩展方式. 第一步,不污染全局环境. ES5中的JS作用域是函数作用域. 函 ...

  9. [Java基础]循环结构3

    [Java基础]循环结构3 break 与 continue 中断循环... /** 文件路径:G:\JavaByHands\循环语句\ 文件名称:BreakTest.java 编写时间:2016/6 ...

  10. 新建web工程Jdk怎么不是自己安装的, 是自带的

    需要在eclipse中配置默认的jdk环境的,不要用它默认的那个,这个不能用的http://blog.csdn.net/clj198606061111/article/details/11881575 ...