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开发--面试

    今天一大清早去面试, 公司距离我家还挺近的, 花了一个小时走着去, 也顺路印下简历, 理理思路, 到了公司面试官什么的都不错, 还给我讲了很多知识, 收货也是满满的, 总结下今天都遇到了哪些问题, 调 ...

  2. sublime text 输入法候选词不跟随光标

    可以使用imesupport 插件解决 百度 : 搜狗 sublime 不跟 光标 找到这篇文章, 原始作者 http://qianduanblog.com/post/sublime-text-3-p ...

  3. 织梦dedecms漏洞修复大全(5.7起)

    很多人说dedecms不好,因为用的人多了,找漏洞的人也多了,那么如果我们能修复的话,这些都不是问题. 好,我们来一个一个修复.修复方法都是下载目录下该文件,然后替换或添加部分代码,保存后上传覆盖(记 ...

  4. 从零自学Hadoop系列索引

    本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 从零自学Hadoop(01):认识Hadoop ...

  5. 项目自动化建构工具gradle 入门0——环境 & 废话

    gradle 是一个项目自动化构建工具.同类的产品还有ant ,maven等等.相比之下我更喜欢gradle,它语法简洁.兼容maven.ide集成很好. 学习使用gradle最快的方式是看文档,而且 ...

  6. Don't repeat yourself

    今天工作上要测试不同版本mysql在不同系统的速度,学习了怎么源码安装mysql后,就开始敲命令安装和编译执行测试程序. 这么走了两遍后,想起一句话——当一件事重复做三遍后,要考虑把它工具化,自动化. ...

  7. AssetBundle Manager & Example Scenes

    https://www.assetstore.unity3d.com/en/#!/content/45836 https://docs.unity3d.com/Manual/AssetBundlesI ...

  8. CMakeList.txt/Clion中添加头文件和库

    cmake_minimum_required(VERSION 3.6) project(capi_lua) include_directories(/usr/include) find_library ...

  9. codevs 2879 堆的判断

    codevs 2879 堆的判断 http://codevs.cn/problem/2879/ 题目描述 Description 堆是一种常用的数据结构.二叉堆是一个特殊的二叉树,他的父亲节点比两个儿 ...

  10. Integrating SharePoint 2013 with ADFS and Shibboleth

    Time again to attempt to implement that exciting technology, Federation Services (Web Single Sign On ...