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 ...
随机推荐
- 关于学习JavaScript 的 高三编程 一些心得(三)
最近在学习高三的 过程中,遇到的了一些 难以理解的问题, 在看到第五章之前都是 OK 的.但是到了 引用类型的时候就有点蒙了. 首先我们看下,引用类型的 解释:[引用类型的值(对象)是引用类型的一个 ...
- ASP.NET AJAX调用 WebService
同事的代码,帮忙修改的,为了实现页面跳转回来后,状态的保持,Service 使用了Session. 主要的JS $.ajax({ url: "/ws/StaffInfo.asmx/Note& ...
- sscanf提取字符串中的数据php
1.需求 理解sscanf的作用 2.例子 $str = "age:30 weight:60kg"; sscanf($str,"age:%d weight:%dkg&qu ...
- PYTHON 函数的普通参数
# 形式参数,还没有赋值的代指参数 def kd(p): print(p) return True #实际参数,只有实际值的参数 ret = kd(") if ret: print(&quo ...
- Sublime Text3中Autoprefixer失效解决方法
进入CSS文件,默认配置在按下快捷键(Ctrl+Shift+P)后输入Autoprefix,你会发觉它什么事也没干,然后--这什么鬼?抓狂ing-- 原来是因为这玩意还要配置下,以下为配置方法: Pr ...
- ToolStripMenuItem
MenuStrip 类 为窗体提供菜单系统. 继承层次结构 System.Object System.MarshalByRefObject System.ComponentModel.Comp ...
- BeautifulSoup的选择器
用BeautifulSoup查找指定标签(元素)的时候,有几种方法: soup=BeautifulSoup(html) 1.soup.find_all(tagName),返回一个指定Tag元素的列表 ...
- destoon二次开发基础代码
标签调用规则 http://help.destoon.com/develop/22.html 数据字典 http://help.destoon.com/dict.php destoon各类调用汇总 h ...
- Odd Even Linked List
Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...
- 5.openstack之mitaka搭建计算节点
部署计算节点(compute服务) 一:控制节点配置 1.建库建用户 CREATE DATABASE nova_api; CREATE DATABASE nova; GRANT ALL PRIVILE ...