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 ...
随机推荐
- ViewPager与Tab结合使用
我们有时候需要 标题页卡与ViewPager结合使用,其实原理也很简单. 不过工程中要引入android-support-design.jar 首先是布局文件 <android.support. ...
- iOS网络2——NSURLSession使用详解
原文在此 一.整体介绍 NSURLSession在2013年随着iOS7的发布一起面世,苹果对它的定位是作为NSURLConnection的替代者,然后逐步将NSURLConnection退出历史舞台 ...
- PHP语法(三):控制结构(For循环/If/Switch/While)
相关链接: PHP语法(一):基础和变量 PHP语法(二):数据类型.运算符和函数 PHP语法(三):控制结构(For循环/If/Switch/While) 本文我来总结几个PHP常用的控制结构,先来 ...
- linux shell字符串内置的常用操作(获取长度、查找、替换)
在编写shell程序时,经常会涉及到字符串相关操作.有许多命令语句,如awk,sed都能够做字符串各种操作. 事实上shell内置一系列操作符号,能够达到相似效果,使用内部操作符会省略启动外部程序等时 ...
- kali linux之窥看女神上网隐私(ettercap+wireshark+zenmap +dsniff)
作者:小波 http://www.cnblogs.com/xiaobo-Linux/ 无聊就玩了玩,不要干一些坏事哟~~网上也有一些文章关于kali linux的,就实战了一番.kali是用的debi ...
- [数据分析]excel带名称的四象限散点图制作
本文前言:方法来至Excel图表之道这本数,偶然看到,好久没出数据分析的文章了,也难怪最近几个月都忙作网页,数据分析自己也就用excell和sql 正文: 带象限的散点图效果如下: 看到图片,这里制作 ...
- chrome浏览器 开发者工具简介
Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀. 掌握了Chrome工具可提高学习效率和开发效率. 有如下功能面板,可以使用Ctrl+[和Ctrl+] ...
- MMORPG大型游戏设计与开发(服务器 AI 控制器)
上一篇我们说了基础接口的组成,想必大家对AI中的基础方法有了一定的了解,而基础接口只能一个通用的,要实现不同的类别还需子类中实现,这就形成了玩家.主动.被动.木桩这些类型.不同类型的AI需要有一个统一 ...
- JAVA中整型的存储和左右移位运算
byte,1个字节8位, -128 ~ 127之间,首位表示正负,0为正,1为负,0111,1111表示127,-127为127取反1000,0000,再加1,即1000,0001为-127,-127 ...
- [LeetCode] Find Minimum in Rotated Sorted Array 寻找旋转有序数组的最小值
Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...