1.先写一个html页面,里面写一个全选按钮和几个复选框,实现下面2个要求

(1)点击全选按钮选中时,所有的复选框选中.

(2)点击全选按钮取消选中时,所有复选框取消选中。

<input type="checkbox" id="quanxuan" />全选<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />

2.js处理代码

$("#quanxuan").click(function(){//给全选按钮加上点击事件
var xz = $(this).prop("checked");//判断全选按钮的选中状态
var ck = $(".qx").prop("checked",xz); //让class名为qx的选项的选中状态和全选按钮的选中状态一致。
})

以上代码完全可以完美的实现要求的2个功能。这里需要注意的是不能使用下面的方法做全选按钮,因为下面的方法有严重的不足之处。

1.html页面

<input type="checkbox" onclick="quanxuan(this)" />全选<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />

2.处理页面

<script type="text/javascript">
function quanxuan(a)
{
//找到下面所有的复选框
var ck =document.getElementsByClassName("qx"); //遍历所有复选框,设置选中状态。
for(var i=0;i<ck.length;i++)
{
if(a.checked)//判断全选按钮的状态是不是选中的
{
ck[i].setAttribute("checked","checked");//如果是选中的,就让所有的状态为选中。
}
else
{
ck[i].removeAttribute("checked");//如果不是选中的,就移除所有的状态是checked的选项。
}
}
}
</script>

上面的方法看似也可以实现全选按钮的功能,但是执行下列操作步骤后就会出现问题:

(1)点击任意一个复选框,使复选框处于选中状态;

(2)点击全选按钮,所有复选框变成了选中状态;

(3)再次点击全选按钮,所有按钮应该取消选中状态。但是问题出现了,第1步中选中的选中的按钮还是处于选中状态。

这就是第二种全选按钮方法存在的弊端,所以全选按钮最好使用第一种,方便而实用。

checkbox做全选按钮的更多相关文章

  1. 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. asp:DataGrid之添加asp:CheckBox做全选功能时涉及到绑值问题解决

    最大的意图是为asp:CheckBox的value绑定上自己需要的value值,而不是默认的字符串"on" 参考了这篇文章带Value属性的扩展CheckBox控件,意义不大,换了 ...

  4. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  5. 11.8 开课二个月零四天 (Jquery取属性值,做全选,去空格)

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. 让DuiLib CheckBox支持全选、全不选、非全选三种状态

    原文 https://blog.csdn.net/EveyX/article/details/38433783 DuiLib官方库中的Checkbox只有Checked和Uncheck两种状态,但我们 ...

  7. Android高级控件(一)——ListView绑定CheckBox实现全选,增加和删除等功能

    Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...

  8. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  9. zepto全选按钮之全选会根据按钮是否被全部选中更改状态

    在做手机端二次开发购物车的时候,发现zepto全选,没找到,或者功能不是自己想要的 后来做好,分享给需要的人 //全选或多选处理      var CheckAll = $('#items_check ...

随机推荐

  1. Myeclipse开发环境下文件中出现的提示错误与解决方法:The import javax.servlet cannot be resolved?

    1.开发工具:MyEclipse 2.右击项目  >>  Build Path  >>  Add External Archives (Tomcat  >>  li ...

  2. MySQL 数据库通过日志恢复

    http://blog.csdn.net/hanxin1987216/article/details/5976856 要想从二进制日志恢复数据,你需要知道当前二进制日志文件的路径和文件名.一般可以从选 ...

  3. Python的模块引用和查找路径

    模块间相互独立相互引用是任何一种编程语言的基础能力.对于“模块”这个词在各种编程语言中或许是不同的,但我们可以简单认为一个程序文件是一个模块,文件里包含了类或者方法的定义.对于编译型的语言,比如C#中 ...

  4. 使Python IDLE也变得高颜值

    初学Python,大家应该都是用Python自带的IDLE了,我们可以让他颜值高一些,这样敲出的代码就赏心悦目,比如像下面这样:   我们首先要找到名为config-highlight.cfg的文件, ...

  5. 【Linux管理】用户管理

    每次玩linux都会去网上找一些命令,想想应该记录一下,希望方便大家,当然更方便自己. 1.添加用户 useradd username//添加用户 passwd username//设置密码 2.配置 ...

  6. 《InsideUE4》UObject(二)类型系统概述

    曾子曰:吾日三省吾身--为人谋而不忠乎?与朋友交而不信乎?传不习乎? 引言 上一篇我们谈到了在游戏引擎,或者在程序和高级编程语言中,设计一个统一对象模型得到的好处,和要付出的代价,以及在UE里是怎么对 ...

  7. Linux 系统常用命令汇总(三) 用户和用户组管理

    用户和用户组管理 命令 选项 注解 示例 useradd [选项] 用户名 新建用户 创建一个名为tester的用户,并指定他的UID为555,指定加入test群,指定其使用C-shell:  use ...

  8. TCP/IP协议(二)tcp/ip基础知识

    今天凌晨时候看书,突然想到一个问题:怎样做到持续学习?然后得出这样一个结论:放弃不必要的社交,控制欲望,克服懒惰... 然后又有了新的问题:学习效率时高时低,状态不好怎么解决?这也是我最近在思考的问题 ...

  9. node fs lstat 如何区别文件和文件夹

    通过lstat 得到 文件的描述对象 stat. stat.isFile() stat.isDirectory()

  10. win10+vs2013+cuda8.0+caffe

    1,首先说下环境和配置 配置: 环境:windows10,vs2013 community,cuda8.0,caffe,cudnn4 注意:先要安装好显卡驱动(我的显卡是1070),这里的例子只开通了 ...