废话不说，直接上代码！

<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. legend2---开发日志15（功能需求明确，设计好类和结构的好处是）

    legend2---开发日志15(功能需求明确,设计好类和结构的好处是) 一.总结 一句话总结: 极快简化编程,节约大量时间 1.多个类型的物品,比如商店和寻宝的丹药,装备,特性书,英雄石等等 应该怎 ...

  2. html5--1.15 style元素与HTML样式基础

    html5--1.15 style元素与HTML样式基础 学习要点: 1.引入样式的三种方式2.了解style元素插入内联样式表与内部样式表 1.引入样式的三种方式 1.外部样式表:通过 link元素 ...

  3. arm-linux-gcc4.4.3编译busybox-1.25.0

    系统环境: 1.操作系统:Ubuntu16.04 2.交叉编译工具链:arm-linux-gcc4.4.3 3.busybox源码包:busybox-1.25.0 一.修改Makefile配置 首先解 ...

  4. 「P4996」「洛谷11月月赛」 咕咕咕（数论

    题目描述 小 F 是一个能鸽善鹉的同学,他经常把事情拖到最后一天才去做,导致他的某些日子总是非常匆忙. 比如,时间回溯到了 2018 年 11 月 3 日.小 F 望着自己的任务清单: 看 iG 夺冠 ...

  5. python+ mysql存储二进制流的方式

    很多时候我们为了管理方便会把依稀很小的图片存入数据库,有人可能会想这样会不会对数据库造成很大的压力,其实大家可以不用担心,因为我说过了,是存储一些很小的图片,几K的,没有问题的! 再者,在这里我们是想 ...

  6. HDU4027(线段树单点更新区间)

    Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65768/65768 K ...

  7. 修改eclipse中的propersties文件的默认编码格式

    最近遇到每次新建工程里无论在总得工程设置了utf-8还是刚刚建立的空间设置都没有效果, 原来properties文件的设置要单独弄,如下图所示

  8. 选择排序（java）

    选择排序的思想是:内外两层循环,第一层循环从第一个数开始到倒数第一个数, 第二层循环从上一层的数开始, 与上一层循环的数比较,如果小于则交换位置. 代码如下: public class SelectS ...

  9. sorted matrix - search & find-k-th

    sorted matrix ( Young Matrix ) search for a given value in the matrix: 1) starting from upper-right ...

  10. SpringBoot使用拦截器无效

    附上代码: public class WendaWebConfiguration extends WebMvcConfigurerAdapter { @Autowired PassportInterc ...