废话不说，直接上代码！

<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. JS事件派发器EventEmitter

    原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html 需求 随着Browser客户端JS越来越复杂,MVC(Client端)设计 ...

  2. 获取url的参数

    function getPrams () { var url, urlPrams, urlPramsArr=[], item=[], prams={}; url = location.href; if ...

  3. T61

    你参加了这次科学讨论会,有什么体会?What have you learned from the symposium?那墙有点斜.The wall is a little out of the per ...

  4. HihoCoder1643 : 最少换乘（[Offer收割]编程练习赛37）（bfs）

    描述 小Ho居住的城市有N条公交车线路,其中第i条线路上有Ki个车站. 某些线路之间会有公共的车站,小Ho可以在这些车站从一条线路换乘到另一条线路. 现在给定N条公交车线路以及两个车站S和E,你能帮助 ...

  5. 1119 Pre- and Post-order Traversals（30 分）

    1119 Pre- and Post-order Traversals(30 分) Suppose that all the keys in a binary tree are distinct po ...

  6. ACM学习历程—HDU1584 蜘蛛牌（动态规划 && 状态压缩 || 区间DP）

    Description 蜘蛛牌是windows xp操作系统自带的一款纸牌游戏,游戏规则是这样的:只能将牌拖到比她大一的牌上面(A最小,K最大),如果拖动的牌上有按顺序排好的牌时,那么这些牌也跟着一起 ...

  7. ACM学习历程—Hihocoder 1178 计数(位运算 && set容器)（hihoCoder挑战赛12）

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB   描述 Rowdark是一个邪恶的魔法师.在他阅读大巫术师Lich的传记时,他发现一类黑魔法来召唤远古生物,鱼丸. 魔法n能召 ...

  8. RMI RPC socket

      1.RPC RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC不依赖于具体的 ...

  9. Python操作MySQL数据库9个实用实例

    用python连接mysql的时候,需要用的安装版本,源码版本容易有错误提示.下边是打包了32与64版本. MySQL-python-1.2.3.win32-py2.7.exe MySQL-pytho ...

  10. DAL 层引用 System.Net.Http ，引发的一阵心慌

    快下班的时候 代码data 数据层编译失败,引起整个解决方案全部失败:其他同事虽然vs 版本不同,但是都能编译通过:考虑到今天更改过vs 的设置,把今天更改的设置全部都恢复,结果还是不行.最后直接恢复 ...