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. mysql之show engine innodb status解读

    注:以下内容为根据<高性能mysql第三版>和<mysql技术内幕innodb存储引擎>的innodb status部分的个人理解,如果有错误,还望指正!!   innodb存 ...

  2. android权限使用

    1.拍照权限使用:

  3. sql server2008 R2 生成带数据的脚本

    目前 sql server2008 R2 版本有这个功能 http://www.cnblogs.com/weisenz/archive/2013/03/20/2971334.html

  4. CSS中的浮动问题

    有关于我们经常做的导航问题.我们如果想用ul>li来做导航的话,我是一般是用到浮动这个属性的. 也就是 float:left; 或者是 display:inline-block;  下边代码: ...

  5. 为PetaPoco添加实体模板

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

  6. 皇后(queen)

    皇后(queen)[题目描述] 众所不知,rly现在不会玩国际象棋.但是,作为一个OIer,rly当然做过八皇后问题.这里再啰嗦几句,皇后可以攻击到同行同列同对角线,在n*n的方格中摆n个皇后使其互不 ...

  7. python virtualenv

    一  安装 pip install virtualenvwrapper - 把下面这句加到~/.bash_profile里面,如不嫌麻烦,也可以每次都手动执行.source /usr/local/bi ...

  8. 合并基因表达水平(merge gene expression levels, FPKM)

    使用tophat和cufflinks计算RNA-seq数据的表达水平时,当一个基因在一个样本中有多个表达水平时需要合并它们的表达水平. This code is a solution to colla ...

  9. consul的安装配置 一centos7环境

    centos7上consul的安装--新手笔记 环境 我用的是centos7, 用的是vmware 一 安装系统后首先要设置ip ifconfig eth0 →查看IP 不过输出的信息多一些 ifco ...

  10. [必会] 表单验证+弹框~老司机原生js

    <!DOCTYPE html><html><head> <meta charset="gb2312"> <title>恰 ...