checkbox做全选按钮
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做全选按钮的更多相关文章
- 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- asp:DataGrid之添加asp:CheckBox做全选功能时涉及到绑值问题解决
最大的意图是为asp:CheckBox的value绑定上自己需要的value值,而不是默认的字符串"on" 参考了这篇文章带Value属性的扩展CheckBox控件,意义不大,换了 ...
- jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格
1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...
- 11.8 开课二个月零四天 (Jquery取属性值,做全选,去空格)
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 让DuiLib CheckBox支持全选、全不选、非全选三种状态
原文 https://blog.csdn.net/EveyX/article/details/38433783 DuiLib官方库中的Checkbox只有Checked和Uncheck两种状态,但我们 ...
- Android高级控件(一)——ListView绑定CheckBox实现全选,增加和删除等功能
Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- zepto全选按钮之全选会根据按钮是否被全部选中更改状态
在做手机端二次开发购物车的时候,发现zepto全选,没找到,或者功能不是自己想要的 后来做好,分享给需要的人 //全选或多选处理 var CheckAll = $('#items_check ...
随机推荐
- Myeclipse开发环境下文件中出现的提示错误与解决方法:The import javax.servlet cannot be resolved?
1.开发工具:MyEclipse 2.右击项目 >> Build Path >> Add External Archives (Tomcat >> li ...
- MySQL 数据库通过日志恢复
http://blog.csdn.net/hanxin1987216/article/details/5976856 要想从二进制日志恢复数据,你需要知道当前二进制日志文件的路径和文件名.一般可以从选 ...
- Python的模块引用和查找路径
模块间相互独立相互引用是任何一种编程语言的基础能力.对于“模块”这个词在各种编程语言中或许是不同的,但我们可以简单认为一个程序文件是一个模块,文件里包含了类或者方法的定义.对于编译型的语言,比如C#中 ...
- 使Python IDLE也变得高颜值
初学Python,大家应该都是用Python自带的IDLE了,我们可以让他颜值高一些,这样敲出的代码就赏心悦目,比如像下面这样: 我们首先要找到名为config-highlight.cfg的文件, ...
- 【Linux管理】用户管理
每次玩linux都会去网上找一些命令,想想应该记录一下,希望方便大家,当然更方便自己. 1.添加用户 useradd username//添加用户 passwd username//设置密码 2.配置 ...
- 《InsideUE4》UObject(二)类型系统概述
曾子曰:吾日三省吾身--为人谋而不忠乎?与朋友交而不信乎?传不习乎? 引言 上一篇我们谈到了在游戏引擎,或者在程序和高级编程语言中,设计一个统一对象模型得到的好处,和要付出的代价,以及在UE里是怎么对 ...
- Linux 系统常用命令汇总(三) 用户和用户组管理
用户和用户组管理 命令 选项 注解 示例 useradd [选项] 用户名 新建用户 创建一个名为tester的用户,并指定他的UID为555,指定加入test群,指定其使用C-shell: use ...
- TCP/IP协议(二)tcp/ip基础知识
今天凌晨时候看书,突然想到一个问题:怎样做到持续学习?然后得出这样一个结论:放弃不必要的社交,控制欲望,克服懒惰... 然后又有了新的问题:学习效率时高时低,状态不好怎么解决?这也是我最近在思考的问题 ...
- node fs lstat 如何区别文件和文件夹
通过lstat 得到 文件的描述对象 stat. stat.isFile() stat.isDirectory()
- win10+vs2013+cuda8.0+caffe
1,首先说下环境和配置 配置: 环境:windows10,vs2013 community,cuda8.0,caffe,cudnn4 注意:先要安装好显卡驱动(我的显卡是1070),这里的例子只开通了 ...