jQuery实现全选效果【转】
这是一段用jquery实现全选的代码，主要思路如下：
1.所有的复选框都有单击事件，所有效果都是在单击事件下实现的
2.全选复选框所实现的功能与其他复选选项实现的功能不同，所有在单击事件内做一个判断，是否是全选复选框的单击事件
3.如果是，则执行判断全选复选框是否选中，如果当前状态为选中，那么点击后取消勾选，同时取消所有选项的勾选，如果全选当前未选中，点击后勾选，并勾选所有
4.如果不是，说明点击的对象是出全选外的其他选项，那么就要判断当前已经勾选的选项的数量，是否等于除了全选复选框以外所有选项的数量，如果相等，则说明，选项全部勾选，同时将全选复选框也勾选，否则不勾选。
下面是我的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').click(function(){
if($(this).index() == 0){
//判断当前全选框是否选中，如果选中则全选，否则全不选
if($('input').eq(0).prop('checked')){
$(this).nextAll().prop('checked',true);
}else{
$(this).nextAll().prop('checked',false);
}
}else{
//判断除了全选之外的选项是否全部选中，选中则勾上全选，否则全不选
if($('input:gt(0):checked').length == $('input').length-1){
$('input').eq(0).prop('checked',true)
}else{
$('input').eq(0).prop('checked',false)
}
}
})
})
</script>
</head>
<body>
<input type="checkbox" />全选
<input type="checkbox" />语文
<input type="checkbox" />数学
<input type="checkbox" />英语
</body>
</html>
实现全选效果的思路也比较多，这种思路相对与分开两个单击事件的思路来说，稍微有点难理解，但其实实现效果的代码，是一样的。
jQuery实现全选效果【转】的更多相关文章
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- （转载）jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...
- avalon全选效果分析讲解
全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击 所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...
- jQuery实现全选、全不选、反选
如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery实现全选、反选、不选
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- jQuery实现全选与全不选功能
初始时: 实现功能后: 实现该功能的核心代码: <script> $(function(){ $("#selectBtn").click(function(){ con ...
随机推荐
- [Head First设计模式]生活中学设计模式——外观模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- 带有“非简单参数”的函数为什么不能包含 "use strict" 指令
非简单参数就是 ES6 里新加的参数语法,包括:1.默认参数值.2.剩余参数.3.参数解构.本文接下来要讲的就是 ES7 为什么禁止在使用了非简单参数的函数里使用 "use strict&q ...
- AOP基本名词解释
- [Linux] Linux指令汇总(持续更新中...)
写在前面: 以前真心没有玩过Linux系统,总感觉整天摆弄Linux的同学都是大牛.如今,在公司里实习需要远程登录Linux服务器,所有的代码都要在开发板上完成,所以被逼无奈也不得不定下心来好好学学L ...
- [Qt]用QItemDelegate的来修改QStandardItem字体颜色
1.重写ItemDelegate的Item方法 这里我使用的QListView来显示Log日志,将写好的代理在初始化中就可以直接赋值上. m_LogModel = new QStandardItemM ...
- 前端开发者进阶之函数柯里化Currying
穆乙:http://www.cnblogs.com/pigtail/p/3447660.html 在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接 ...
- linux磁盘分区模式
linux磁盘分区模式 模式一:MBR 1)主分区不超过四个 2)单个分区容量最大2TB 模式二:GPT 1)主分区个数"几乎"没有限制(原因:在GPT的分区表中最多可以支持128 ...
- 表设置了自增后往里面插入不自增的id时的处理方法
SET IDENTITY_INSERT 表名 ON 中间写insert语句,但是这里必须把列名更上 SET IDENTITY_INSERT 表名 OFF
- 加载默认图片，如何避免img标签陷入onerror事件死循环
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
- PHP curl获取页面内容，不直接输出到页面，CURLOPT_RETURNTRANSFER参数设置
使用PHP curl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出.这个时候就必需设置curl的或true. 1.curl获取页面内容, 直接输出例子: <?php $ ...