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. iOS-集成支付宝支付、微信支付简单总结

    支付宝快捷支付: 官方文档中,支付宝说建议我们使用支付时要讲签名过程放在服务器端,这样安全.同时给的demo中签名是在本地移动端做的...不过支付宝的集成还是较简单的. 为了安全签名当然放后台做了.我 ...

  2. android基于口令加密快速搞懂(一)

    import java.util.Random; import javax.crypto.Cipher;import javax.crypto.SecretKey;import javax.crypt ...

  3. 【Swift】iOS UICollectionView 计算 Cell 大小的陷阱

    前言 API 不熟悉导致的问题,想当然的去理解果然会出问题,这里记录一下 UICollectionView 使用问题. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cn ...

  4. [译]Angular2 和TypeScript -- 一次简要的预览

    原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted o ...

  5. SSH面试题(struts2+Spring+hibernate)

    struts2 + Spring +hibernate Hibernate工作原理及为什么要用?   原理:   1.读取并解析配置文件   2.读取并解析映射信息,创建SessionFactory ...

  6. centos编译安装mysql

    groupadd mysql #添加mysql组useradd -g mysql -s /sbin/nologin mysql #创建用户mysql并加入到mysql组,不允许mysql用户直接登录系 ...

  7. [Hadoop in Action] 第4章 编写MapReduce基础程序

    基于hadoop的专利数据处理示例 MapReduce程序框架 用于计数统计的MapReduce基础程序 支持用脚本语言编写MapReduce程序的hadoop流式API 用于提升性能的Combine ...

  8. 《HeadFirst SQL》笔记

    规范化 0 约束 1 原子性 2 第一范式 1NF 3 数据模式 4 依赖 5 联接查询 6 交叉联接(AKA 笛卡尔联接,叉积) 7 内联接 8 子查询 9 外联接 10 自联接 11 集合 12 ...

  9. [游戏开发-学习笔记]菜鸟慢慢飞(九)- NGUI- UIWidget(官方说明翻译)

  10. C#基础---Queue(队列)的应用

       Queue队列,特性先进先出. 在一些项目中我们会遇到对一些数据的Check,如果数据不符合条件将会把不通过的信息返回到界面.但是对于有的数据可能会Check很多条件,如果一个数据一旦很多条件不 ...