<html>

<body>  

    <table border="1">

        <tr>

            <th><input type="checkbox" onclick="swapCheck()" /></th>

            <th>Month</th>

            <th>Savings</th>

        </tr>

        <tr>

            <td><input type="checkbox" /></td>

            <td>January</td>

            <td>$100</td>

        </tr>

        <tr>

            <td><input type="checkbox" /></td>

            <td>February</td>

            <td>$150</td>

        </tr>

    </table>  

    <script type="text/javascript"

        src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>  

    <script type="text/javascript">

        //checkbox 全选/取消全选

        var isCheckAll = false;

        function swapCheck() {

            if (isCheckAll) {

                $("input[type='checkbox']").each(function() {

                    this.checked = false;

                });

                isCheckAll = false;

            } else {

                $("input[type='checkbox']").each(function() {

                    this.checked = true;

                });

                isCheckAll = true;

            }

        }

    </script>  

</body>

</html>

效果图：

html全选和取消全选JS的更多相关文章

  1. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  2. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  3. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  4. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  5. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  6. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  7. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  8. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  9. DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

    .net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下:         代码如下,有注解,相信大家都看得明白:   ...

  10. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

随机推荐

  1. npm WARN build `npm build` called with no arguments. Did you mean to `npm run-script build`?

    跑npm build结果如下: npm WARN build `npm build` called with no arguments. Did you mean to `npm run-script ...

  2. （原创）C++11改进我们的程序之简化我们的程序（七）

    这次要讲的内容是:c++11中的tuple(元组).tuple看似简单,其实它是简约而不简单,可以说它是c++11中一个既简单又复杂的东东,关于它简单的一面是它很容易使用,复杂的一面是它内部隐藏了太多 ...

  3. Node和Electron开发入门（四）：操作PC端文件系统

    一.调用PC端默认方式打开本地文件 在main.js里 // 打开系统本地文件或者网页链接 const {shell} = require('electron'); // Open a local f ...

  4. LeetCode: Reverse Integer 解题报告

    Reverse Integer Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, retur ...

  5. virtual box 5.2.12 扩展包安装

    http://download.virtualbox.org/virtualbox/     找到对应版本的virulbox去下载就可以了

  6. C# ASP.NET B/S模式下，采用lock语法 实现多用户并发产生不重复递增单号的一种解决方法技术参考

    有时候也好奇,若是老外发个技术文章,会不会到处是有人骂街的?进行人身攻击的?中国人喜欢打击别人,不知道老外是不是也是这个性格?好奇的问一下大家. 往往我们在开发程序.调试程序时,无法模拟多用户同时操作 ...

  7. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  8. Windows获取远程Linux局域网内的mysql连接

    求:本地Windows7电脑,通过xshell和xftp能够连接远程Linux服务器,但是数据库不在这台服务器上,在Linux服务器的局域网里面: 需要当前本地Windows7电脑能够连接Linux服 ...

  9. java随机范围内的日期

    使用了最新的java8的java.time类,并提供了LocalDateTime和java.util.Date之间的转换. 使用方法: randomLocalDateTime(-3,3) : 取距离今 ...

  10. Centos 5.2 下配置 php 的 json 扩展

    01.下载源文件包:   wget http://www.aurore.net/projects/php-json/php-json-ext-1.2.1.tar.bz2 02.解压文件包:   tar ...