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 ...
随机推荐
- panel的展开，关闭的一种应用。
js: <script type="text/javascript"> $('#p2').panel({ title: 'panel1', closable: fals ...
- [NHibernate]立即加载
目录 写在前面 文档与系列文章 立即加载 一个例子 总结 写在前面 上篇文章介绍了nhibernate延迟加载的相关内容,简单回顾一下延迟加载,就是需要的时候再去加载,需要的时候再向数据库发出sql指 ...
- HDU 1003 maxsum
#include<iostream> #include<vector> using namespace std; typedef struct { int maxsum; in ...
- Go - 字典（map）
字典是一种内置的数据结构,用来保存 键值对 的 无序集合. (1)字典的创建 1) make(map[KeyType] ValueType, initialCapacity) 2) make(map[ ...
- 利用Nginx实现域名转发 不修改主机头
在conf下 新建一个 文件 格式 : 域名.conf 例如:www.test.com.conf 文件里配置: server{ listen 80; server_name www.test.com ...
- ubuntu配置 Java SE 1.6
今天编译android 4.0时提示如下错误: You are attempting to build with the incorrect version of java. Your versi ...
- HTTP的报文与状态码
本文是<HTTP权威指南>的读书笔记 HTTP报文是简单的格式化数据块.每条报文都包含一条来自客户端的请求或一条来自服务器的响应.它们由三部分组成: 对报文进行描述的起始行(start l ...
- bootstrap使用心得及css模块化的初步尝试
第一次用bootstrap到实战项目,是一个企业门户站,可以说是强行拿bootstrap上来练手,感觉并不适合. 我是用的less编译bootstrap文件,直接改less变量.然后把不可重用的部分, ...
- word如何插入目录
word如何插入目录 百度经验:jingyan.baidu.com 在写文章的时候我们需要插入目录,如果自己手动添加目录会非常麻烦,以后修改文章的时候还得修改目录的页码,还好Word中有自动添加目录的 ...
- 深入解析PHP中的(伪)多线程与多进程
本篇文章是对PHP中的(伪)多线程与多进程进行了详细的分析介绍,需要的朋友参考下 (伪)多线程:借助外力利用WEB服务器本身的多线程来处理,从WEB服务器多次调用我们需要实现多线程的程序.QUOTE: ...