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 ...
随机推荐
- RDBMS DML DDL
RDBMS RDBMS 指的是关系型数据库管理系统. RDBMS 是 SQL 的基础,同样也是所有现代数据库系统的基础,比如 MS SQL Server, IBM DB2, Oracle, MySQL ...
- ThinkPHP3.2.3整合smarty模板（二）
前言:继ThinkPHP3.2.3整合smarty模板(一)之后,继续来探讨一下tp框架整合smarty模板,看到有人在群上问到怎么使用自定义的常量,今天就具体来谈谈: 一.开发一个项目,必不可少会用 ...
- Flex Builder快捷键
Flex几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/) 快速修正:Ctrl+1 单词补全:Alt+/ 打开外部Java文档:Shift+F2 显示搜索对话框:Ctr ...
- C#深入浅出 继承（六）
这个标题写出来好长时间了,都没写内容,今天无论如何都得写完它,昨天写了一段,尼玛,电脑突然死机,重启之后啥都没了. 继承嘛,有人觉得很简单,但是里面还是有内容可以讲的,因为面向对象也就这么点内容,封装 ...
- PAT Mooc datastructure 6-1
Saving James Bond - Hard Version This time let us consider the situation in the movie "Live and ...
- HDOJ 4652 Dice
期望DP +数学推导 Dice Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- 【bzoj4720】[NOIP2016]换教室
题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节内容相同的课程同时在不同的 ...
- MySQL Cluster在线添加数据节点
增加或减少数据节点的数量和 NoOfReplicas(即副本数,通过管理节点的config.ini配置文件来设置)有关,一般来说NoOfReplicas是2,那么增加或减少的数量也应该是成对的,否则要 ...
- 关于DataTable添加新列到指定列的方法
在开发新项目的时候发现了一个问题 dtResult.Columns.Add()方法只能将指定的列添加到DataTable的列的最后的位置,但是不能添加到指定的列上.举例来说,假设dtResult总共有 ...
- 【Alpha】Daily Scrum Meeting第五次
一.本次Daily Scrum Meeting主要内容 每个人学习情况 任务安排 界面设计问题,怎样让界面更好看? 二.任务安排 学号尾数 昨天做的任务 今天的任务 明天的任务 612 时间轴控件优化 ...