废话不说，直接上代码！

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

<title>Insert title here</title>

</head>

<body>

<div style="margin: 20px;">

        全选：<input type="checkbox" id="selectAll" onclick="selects1()">

    </div>

<div style="width:600px;height: 40px;border: 1px solid #ccc">

    多选框1：<input type="checkbox" class="check_class">

    多选框2：<input type="checkbox" class="check_class">

    多选框3：<input type="checkbox" class="check_class">

    多选框4：<input type="checkbox" class="check_class">

    多选框5：<input type="checkbox" class="check_class">

    多选框6：<input type="checkbox" class="check_class">

</div><br>

<script type="text/javascript">

/*

 * 方法1 在工作电脑和本地电脑都可以正常工作

 * 方法2 在工作电脑只起一次作用，即勾选全选，反选后。再次勾选，不再起作用。本地电脑一样可以正常运行

 * 可能原因是jquery版本问题 ? 工作电脑jQuery版本为1.11系列。这里为3.1.1

 */

    //实现方法1

    function selects1(){

        //实现全选，反选功能

        var selectStatus = $('#selectAll').is(':checked');

        $('.check_class').each(function(){

            $(this).prop('checked',selectStatus);

        });

    }

    //实现方法2

    function selects2(){

        //实现全选，反选功能

        var selectStatus = $('#selectAll').is(':checked');

        $('.check_class').each(function(){

            $(this).attr('checked',selectStatus);

        });

    }

</script>

</html>

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

  1. jquery 书写全选反选功能

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

  2. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  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. 存储过程之ROWTYPE 使用事例

    CREATE OR REPLACE PROCEDURE "DYLTWZDSJ_CP_BA" (YWID IN VARCHAR2, XKZBH IN VARCHAR2, FLAG O ...

  2. 【HDU 3487】Play with Chain Splay

    题意 给定$n$个数序列,每次两个操作,将区间$[L,R]$拼接到去掉区间后的第$c$个数后,或者翻转$[L,R]$ Splay区间操作模板,对于区间提取操作,将$L-1$ Splay到根,再将$R+ ...

  3. python读文件出现中文乱码

    更新: 一个解释更详细和全面的博文:https://www.cnblogs.com/zhangqigao/p/6496172.html 最近开始处理中文文本,读取文件有时候会出现乱码.原因:编码和解码 ...

  4. hyperledger fabric学习（1）

    第一部分 环境搭建 说明 本次环境搭建是是现在虚拟机中,采用ubuntu 16.04版本,安装多次成功. 首先安装一些常用的工具 sudo apt-get update sudo apt-get in ...

  5. CodeForces - 123E Maze

    http://codeforces.com/problemset/problem/123/E 题目翻译:(翻译来自: http://www.cogs.pw/cogs/problem/problem.p ...

  6. tyvj 1203 机器分配

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 总公司拥有高效生产设备M台,准备分给下属的N个公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何 ...

  7. 【Lintcode】099.Reorder List

    题目: Given a singly linked list L: L0 → L1 → … → Ln-1 → Ln reorder it to: L0 → Ln → L1 → Ln-1 → L2 → ...

  8. codeblocks 汉字乱码

    网上有很多方法,不过目测是不同的机子和环境要用不同的设置来应对这种情况 电脑情况: win8 64-bit 装的是codeblocks v12.11 然后在我电脑上正确的配置是setting-edit ...

  9. 2018ACM-ICPC宁夏邀请赛 A-Maximum Element In A Stack（栈内最大值）

    Maximum Element In A Stack 20.91% 10000ms 262144K   As an ACM-ICPC newbie, Aishah is learning data s ...

  10. ASP.NET学习笔记（二）语法

    基本的 ASP 语法规则 通常情况下,ASP 文件包含 HTML 标签,类似 HTML 文件.不过,ASP 文件也能够包含服务器端脚本,这些脚本被分隔符 <% 和 %> 包围起来. 在 A ...