jquery中实现全选按钮
<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#handle').click(function(){
if($(this).attr('checked')==true){
$('.toggle').attr('checked','true');
}
else{
$('.toggle').removeAttr('checked');
}
});
$('.toggle').click(function(){
if($('.toggle:checked').length==$('.toggle').length){
$('#handle').attr('checked','true');
}
else{
$('#handle').removeAttr('checked');
}
});
});
</script>
<style type='text/css'>
ul{
background-color:#ccc;
list-style:none;
margin 20px auto;
}
li{
padding:10px;
}
</style>
</head>
<body>
<ul>
<li>
<input type='checkbox' id='handle'>
<label for='handle'>
<strong> Toggle ALL</strong></label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> aaaaaaa</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> bbbbbbb</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> cccccccc</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> ddddddd</label>
</li>
</ul>
</body>
</html>
jquery中实现全选按钮的更多相关文章
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- 列表中checked全选按钮的实现
用过音乐播放器的人都知道有个全选按钮,如果使用Jquery实现,有个直接选中checked标签的方式 <!DOCTYPE HTML> <html> <head> & ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 在jquery中，全选/全不选的表示方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jquery中的全选、反选、全不选和单删、批删
HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...
- jquery中的全选，全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery 组 checkbox全选按钮
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- jQuery中关于全选、全不选和反选
1.首先我们要获取当前点击的对象,然后得到点击事件, 判断他的状态如果是checked的话就把该第二行的选中, 否则就取消选中. 2.当第二列功能小项没有全部选中时,该行第一列的复选款也要取消 ...
- 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
随机推荐
- 高仿114la网址导航源码完整最新版
给大家本人我精心模仿的高仿114la网址导航源码,我们都知道114la网址导航的影响力,喜欢的朋友可以下载学习一下. 由于文件较大,没有上传了,下载地址在下面有的. 附源码下载: 114la网站导航 ...
- BZOJ 2705: [SDOI2012]Longge的问题( 数论 )
T了一版....是因为我找质因数的姿势不对... 考虑n的每个因数对答案的贡献. 答案就是 ∑ d * phi(n / d) (d | n) 直接枚举n的因数然后求phi就行了. 但是我们可以做的更好 ...
- MFC对话框Style说明
Popup:弹出窗口 Overlapped:重叠窗口 Child:子窗口 在它们之间并没有太多内在的差异,但是使用不同的窗口风格,它们的外观是 不同的. 重叠窗口通常用于建立应用程序主窗口.事实上,有 ...
- Delphi + Asm - TBits类的学习
技术交流,DH讲解. 在D2010的classes中有个TBits类,这个类主要是位操作的. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 TBits = class privat ...
- OpenCV Python教程（3、直方图的计算与显示）
转载请详细注明原作者及出处,谢谢! 本篇文章介绍如何用OpenCV Python来计算直方图,并简略介绍用NumPy和Matplotlib计算和绘制直方图 直方图的背景知识.用途什么的就直接略过去了. ...
- 利用ArrayList对Hashtable其进行排序
前言: 最近在使用Hashtable的时候发现一个问题:就是当你对Hashtable进行遍历的时候整个输出结果是毫无顺序的, 上网查了一下说是Hashtable有自己内部的排序机制,如果要自定义排序的 ...
- Selenium WebDriver TestNg Maven Eclipse java 简单实例
环境准备 前提条件Eclipse 已经安装过 TestNg ,Maven 插件 新建一个普通的java项目 点击右键 configure->convert to Maven Project 之后 ...
- 中间件(Middleware)
中间件(Middleware) ASP.NET Core开发,开发并使用中间件(Middleware). 中间件是被组装成一个应用程序管道来处理请求和响应的软件组件. 每个组件选择是否传递给管道中的下 ...
- 猿取向的规划设计模式 ——GoF《设计模式》阅读摘要（零）
这个话题是很奇怪,设计模式是引导程序的设计不是模仿什么软件?呃.我的意思是,这是 面"对象"相对的设计模式. 我曾见过有人写<给妻子解释设计模式>,这样的把计算机中的思 ...
- HDU 4876 ZCC loves cards _(:зゝ∠)_ 随机输出保平安
GG,,,g艹 #include <cstdio> #include <iostream> #include <algorithm> #include <st ...