<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. crontab -e 新法

    SHELL=/bin/sh PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root 0 3 * * * /home/rsync.sh //每天晚上3点执行一次同步 ...

  2. win10+VS2015+boost_1.60.0

    安装boost库的初衷boost库是一个C++'准'标准库,对于一个C++程序员来说,了解强大的boost库是很有必要的.当然,在学习使用这样一个强大的库之前,首先要学会安装.本文讲述了boost_1 ...

  3. 【Delphi】基于状态机的串口通信

    通信协议 串行通信接口(如RS232.RS485等)作为计算机与单片机交互数据的主要接口,广泛用于各类仪器仪表.工业监测及自动控制领域中. 通信协议是需要通信的双方所达成的一种约定,它对包括数据格式. ...

  4. curl传输文件实例

    curl -H "Authorization:Bearer 5d719398-4230-44c7-b88b-f280b6a8d070" -H "Accept: appli ...

  5. vi卡死解决办法

    玩了这么多年linux 居然不知道这个..特此记录. 使用vim时,如果你不小心按了 Ctrl + s后,你会发现不能输入任何东西了,像死掉了一般,其实vim并没有死掉,这时vim只是停止向终端输出而 ...

  6. C#学习笔记(18)——C#构造函数中this和base的使用

    说明(2017-7-21 10:29:44): 1. 关于构造函数里的this和base,在网上查了很多资料,但都没有讲的很清楚的,或者是能让我看懂的,感觉都是叽叽歪歪,罗里吧嗦,磨磨唧唧的,有的直接 ...

  7. 【linux】提醒"libc.so.6: version `GLIBC_2.14' not found"系统的glibc版本太低

    原文链接:http://www.myexception.cn/linux-unix/1622052.html [linux]提示"libc.so.6: version `GLIBC_2.14 ...

  8. Android Retrofit2 网路编程

    Android里面本身有OKHttp,不过不是很好用,这里就用Retrofit2,简单好用. 首先,需要加入网络权限: <uses-permission android:name="a ...

  9. winsock.h与winsock2.h出现重定义或不同的链接

    经常遇到编译socket程序的时候生成几百个错误 以下是出错后的错误信息: >c:\program files\microsoft sdks\windows\v6.0a\include\ws2d ...

  10. EF5.x Code First 一对多关联条件查询,Contains,Any,All

    背景 通过多个部门id获取所有用户,部门和用户是多对多. 已知部门id,获取该部门包括该部门下的所有子部门的所有用户. 关系如下: public class Entity:IEntity { publ ...