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 ...
随机推荐
- 每日学习笔记：js中可以直接用id名调用的问题？
在JavaScript中,标准的id选择器调用语法是: document.getElementById('myid').style.width = pc + "%"; 但是,今天发 ...
- ThinkPHP真正疑难问题笔记
如何选择线程安全版本还是非线程安全版本: http://www.cnblogs.com/Alight/p/3389113.html(看webserver处理请求时, 使用的是多线程的方式还是 多进程的 ...
- PHP session
PHP Session PHP session 变量用于存储关于用户会话(session)的信息,或者更改用户会话(session)的设置.Session 变量存储单一用户的信息,并且对于应用程序中的 ...
- SpringMVC Controller介绍
SpringMVC Controller 介绍 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理 ...
- BZOJ 1833: [ZJOI2010]count 数字计数
Description 问 \([L,R]\) 中0-9的个数. Sol 数位DP. 预处理好长度为 \(i\), 最高位为 \(j\) 的数位之和. 然后从上往下计算,不要忘记往下走的同时要把高位的 ...
- html5 form表单常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- DNS解析过程和域名收敛、域名发散、SPDY应用
前段时间项目要做域名收敛,糊里糊涂的完成了,好多原理不清晰,现在整理搜集下知识点. 域名收敛的目的是什么?简单来说就是域名解析慢.那为什么解析慢?且听下文慢慢道来. 什么是DNS? DNS( Doma ...
- HTTPS Web配置举例
http://www.h3c.com.cn/Products___Technology/Technology/Security_Encrypt/Other_technology/Representat ...
- NameError: name 'sys_platform' is not defined
pip install --upgrade distribute
- python smtplib email
监控系统需要触发报警邮件, 简单笔记一下的用到的库. smtplib class smtplib.SMTP([host[, port[, local_hostname[, timeout]]]]) 返 ...