<!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. 【MATLAB】matlabR2010a与vs2010联合编译设置

    在matlab中编译C++程序,首先要配置编译器>> mex -setupPlease choose your compiler for building external interfa ...

  2. Git的图形化工具使用教程

    虽然感觉并没有什么暖用,但姑且还是写出来留作纪念好了 Git这种分布式版本控制系统最适合的就是单枪匹马搞开发的选手,不需要服务器,下载个git和图形工具,网速快十分钟就能搞定开始愉快的开发工作.我在搭 ...

  3. Vue.js 综合

    <!DOCTYPE HTML> <html> <head> <title>vue.js 处理用户输入</title> <script ...

  4. 数十种TensorFlow实现案例汇集：代码+笔记

    这是使用 TensorFlow 实现流行的机器学习算法的教程汇集.本汇集的目标是让读者可以轻松通过案例深入 TensorFlow. 这些案例适合那些想要清晰简明的 TensorFlow 实现案例的初学 ...

  5. mysql 创建函数问题

    ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declar ...

  6. Office 2010 安装程序包的语言不受系统支持

    主要看了这篇文章之后让我有了处理思路. 最后我直接用压缩文件进行安装,没有时行解压.这样就不会出现找不到什么文件的问题了.所以语言不受系统支持问题也就解决了. 原文内容: 前几天,有位好友跟我说他的 ...

  7. python 取整的两种方法

    问题简介: 要把一个浮点数(float)整数部分提取出来.比如把“2.1”变成“2”的这一过程:现在我们给这个过程起一个名字叫“取整”.那么它 在python中大致可以有两种写法 写法1)类型转换: ...

  8. php分享二十七：批量插入mysql

    一:思考 1:如果插入的某个字段大于数据库定义的长度了,数据库会怎么处理? 1>如果数据库引擎是myisam,则数据库会截断后插入,不报错 2>如果数据库引擎是innodb,则数据库会报 ...

  9. Nginx+tomcat组合实现高并发场景的动静分离和负载均衡方案

    简介 Java服务大多是跑在tomcat里,但是众所周知tomcat的并发性能没有优势(tomcat8及以上的版本可能有所改善),所以为了更好的适应高并发的应用场景,我们可以使用tomcat+ngin ...

  10. 设计模式-装饰模式(Decorator Pattern)

    装饰模式(Decorator Pattern):动态地给一个对象添加一些额外的职责,就增加功能来说,装饰模式比生成子类更为灵活