<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多选框全选/反选</title>
<script src="http://res01.xesimg.com/jquery/jquery.min.js"></script>
</head>
<body>
<div class="demo">
<ul id="list">
<li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
<li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
<li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
<li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
<li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
<li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</div>

</body>
</html>
<script type="text/javascript">
//全选或全不选
$("#all").click(function(){
console.log(this.checked)
if(this.checked){
$("#list :checkbox").prop("checked", true);
}else{
$("#list :checkbox").prop("checked", false);
}
});
//设置全选复选框
$("#list :checkbox").click(function(){
allchk();
});
//获取选中选项的值
$("#getValue").click(function(){
var valArr = new Array;
$("#list input[type=checkbox]:checked").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');
alert(vals);
});
function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if(this.checked){
chk++;
}
});
if(chknum==chk){//全选
$("#all").prop("checked", true);
}else{//不全选
$("#all").prop("checked", false);
}
}
</script>

jquery实现全选/反选功能的更多相关文章

  1. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

  3. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  4. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  5. JS全选反选功能

    总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...

  6. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  7. JQuery实现列表中复选框全选反选功能封装

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...

  8. C# WinForm中实现CheckBox全选反选功能

    今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...

  9. jquery 实现全选反选

    jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...

随机推荐

  1. GO语言中的几个关键思想

    GO语言的设计理念与C++,Java,Python之流大相径庭. 一.没有函数重载 GO语言里面没有函数重载,Java.C#.C++三位大牛都是支持函数重载的,Python虽然不支持函数重载,但是支持 ...

  2. 谈UIView Animation编程艺术

    一.大小动画(改变frame) -(void)changeFrame{ CGRect originalRect = self.anView.frame; CGRect rect = CGRectMak ...

  3. 双链表实现Queue

    算法导论第10章的东西,感觉用双链表真心简单,就是有点浪费空间,但是时间复杂度O(1): #include <stdio.h> struct LinkNode { LinkNode(): ...

  4. 使用 Cobbler 自动化和管理系统安装

    设置一个网络环境可能涉及到许多步骤,才能为开始安装做好准备.您必须: 配置服务,比如 DHCP.TFTP.DNS.HTTP.FTP 和 NFS 在 DHCP 和 TFTP 配置文件中填入各个客户端机器 ...

  5. linux达人养成计划学习笔记（四）—— 压缩命令

    一.常见的压缩格式: 二..zip格式压缩 1.压缩文件.文件夹 zip 压缩后文件名(.zip结尾) 压缩文件名zip -r 压缩后文件夹(.zip结尾) 压缩文件 2.解压缩 unzip 压缩文件 ...

  6. Spring Boot中MyBatis的使用

    orm框架的本质是简化编程中操作数据库的编码,发展到现在基本上就剩两家了,一个是宣称可以不用写一句SQL的hibernate,一个是可以灵活调试动态sql的mybatis,两者各有特点,在企业级系统开 ...

  7. 微信支付中的jsapi返回提示信息

    jsapi中跳转到微信支付中触发的方法是js中的getBrandWCPayRequest方法. 改方法中的返回结果msg提示信息如下: err_msg:get_brand_wcpay_request: ...

  8. XML 特殊字符处理

    在XML中,有一些符号作为XML 的标记符号,一些特定情况下,属性值必须带有这些特殊符号. 下面主要是讲解一些常用的特殊符号的处理 例一: 双引号的使用. 双引号作为XML 属性值的开始结束符号,因此 ...

  9. JSON-handle-好玩的google插件

    一:前言 现在的主要工作是写后台的接口服务,而JSON这种数据格式的数据是最为常用的,经常使用在线的格式化工具,来检查或者编写对应的数据,感觉不够智能,于是试验了一下几个插件,感觉有些挺好用的,在此记 ...

  10. Android上面通过URL来启动本地应用

    <application android:allowBackup="true" android:icon="@drawable/ic_launcher" ...