<!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. 【DeepLearning】Exercise: Implement deep networks for digit classification

    Exercise: Implement deep networks for digit classification 习题链接:Exercise: Implement deep networks fo ...

  2. springboot(六)：如何优雅的使用mybatis

    这两天启动了一个新项目因为项目组成员一直都使用的是mybatis,虽然个人比较喜欢jpa这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关于spring boot ...

  3. Intel Edison学习笔记（二）—— 入门环境配置

    一.安装Screen sudo apt-get install screen 二.配置 1.连接USB,等待出现 2.测试串口是否存在: ls /dev/ttyUSB0 输出/dev/ttyUSB0, ...

  4. Magento模块升级修改数据库表结构

    Magento支持在模块中创建.删除.更新数据库表及字段.通过该方式,在插件开发的过程中,添加和修改字段变成了一件非常轻松的事情.只需要修改模块的版本号,同时在文件中添加一个符合命名规则的脚本就可以了 ...

  5. 系统服务中没有Windows Installer服务怎么办

    在安装软件时,发现安装不了,提示没有Windows Installer服务,到系统服务中一看,果真没有这一项,这是什么问题呢? 出现这种情况,多为与Windows Installer服务相关的文件丢失 ...

  6. 【SqlServer】SqlServer中Alter语句的使用

    在修改Sql Server表结构时,常用到Alter语句,把一些常用的alter语句列举如下. 1:向表中添加字段 Alter table [表名] add [列名] 类型 2:  删除字段 Alte ...

  7. memcache 与 redis 为web app 带来的性能提升

    memcache 与 redis 为web app 带来的性能提升 参考: 1. http://www.cnblogs.com/ToDoToTry/p/3513688.html

  8. 例说Linux内核链表（一）

    介绍 众所周知,Linux内核大部分是使用GNU C语言写的.C不同于其它的语言,它不具备一个好的数据结构对象或者标准对象库的支持. 所以能够借用Linux内核源代码树的循环双链表是一件非常值得让人高 ...

  9. mysql-8.0.11 比较坑的地方dba门要淡定

    [事件描述] 突然之间大量的连接进入数据库.并放开手干,这个使得mysql使用了大量的内存,触发了linux的oom机制.然后mysql就这样 被linux给干掉了.没错MySQL宕机了,要相信我说的 ...

  10. linux php7.1 安装redis扩展

    redis扩展下载网址 http://pecl.php.net/package/redis wget http://101.96.10.64/pecl.php.net/get/redis-3.1.3. ...