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. 《Vuser虚拟用户开发》读书笔记

    学会了Vuser开发只是算了性能测试入了门.要做好性能测试还需要了解系统的功能,架构和设计测试用例. 脚本选用什么协议的依据是需要模拟的客户端与服务器之间的通信采用什么协议.与具体的开发技术并无直接的 ...

  2. .Net最佳实践3:使用性能计数器收集性能数据

    本文值得阅读吗? 本文讨论我们如何使用性能计数器从应用程序收集数据.我们将先了解的基本知识,然后我们将看到一个简单的示例,我们将从中收集一些性能数据. 介绍: - 我的应用程序的性能是最好的,像火箭 ...

  3. hadoop运维经验

    0.优化:http://dongxicheng.org/mapreduce/hadoop-optimization-0/ http://dongxicheng.org/mapreduce/hadoop ...

  4. chrome的timeline中stalled问题解析

    原文地址 :http://foio.github.io/chrome-stalled/ 在公司国做一个运营活动,上线后PM总是抱怨访问速度过慢,影响运营效果.然而从前端的角度来说我已经做了如下优化: ...

  5. 读《编写可维护的JavaScript》第一章总结

    第一章 基本的格式化 1.4 ① 换行 当一行长度到达了单行最大的字符限制时,就需要手动将一行拆成俩行.通常我们会在运算符后换行,下一行会增加俩个层级的缩进. // 好的做法: 在运算符后换行,第二行 ...

  6. zookeeper第二课 客户端的简单命令

    zookeeper的每个节点既可以是目录也可以是文件,节点上只存一些协调数据(状态.配置.位置),单位一般是KB,大部分数据用sdfs上 只有持久化的节点才可以有子节点,临时节点不可以有自子节点. 客 ...

  7. TCP连接的状态与关闭方式及其对Server与Client的影响

    TCP连接的状态与关闭方式及其对Server与Client的影响 1. TCP连接的状态 首先介绍一下TCP连接建立与关闭过程中的状态.TCP连接过程是状态的转换,促使状态发生转换的因素包括用户调用. ...

  8. 【Todo】【读书笔记】机器学习-周志华

    书籍位置: /Users/baidu/Documents/Data/Interview/机器学习-数据挖掘/<机器学习_周志华.pdf> 一共442页.能不能这个周末先囫囵吞枣看完呢.哈哈 ...

  9. 【转载】CSS position属性和实例应用

    目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...

  10. 如何管理linux开机自启服务

    如何管理linux开机自启服务? 自启动服务非常重要,例如 (1)需要手动添加希望自启的服务,如安装svn后没有自动添加,就需要我们手动加入(2)安装某些程序后,自动加到自启动了,但我们不需要,需要手 ...