html checkbox  实现全选/取消全选

<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 checkbox 实现全选/取消全选的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  3. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  4. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  5. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  6. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  7. Vue 全选/取消全选，反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  8. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  9. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

随机推荐

  1. hdu 1068(最大独立集)

    Girls and Boys Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. CentOS7 中把默认yum源更换成163源

    163源是目前国内最好用的源,速度是相当快的,现在我们把CentOS7中的源改为163源 1.进入yum源配置文件 cd /etc/yum.repos.d 2.备份一下当前的源,以防出错后可以还原回来 ...

  3. AC日记——逃离僵尸岛 洛谷 P3393

    逃离僵尸岛 思路: spfa: 代码: #include <cstdio> #include <cstring> #include <iostream> #incl ...

  4. AC日记——Success Rate codeforces 807c

    Success Rate 思路: 水题: 代码: #include <cstdio> #include <cstring> #include <iostream> ...

  5. Macaca 自动化录制工具uirecorder使用入门

    Q&A PC端执行用例前,一定要运行selenium-standalone start,否则会出现这个问题:https://github.com/alibaba/uirecorder/issu ...

  6. POJ 3237.Tree -树链剖分(边权)(边值更新、路径边权最值、区间标记)贴个板子备忘

    Tree Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 12247   Accepted: 3151 Descriptio ...

  7. 26、Django实战第26天：配置全局导航

    1.编辑index.html,继承base.html 2.编辑base.html,根据是否登录不同显示 问题:当我们选中一个导航,选中样式并没有成为选中的状态 因此我们编辑base.html对导航中进 ...

  8. Integer 类和 int 的区别

    http://www.cnblogs.com/ysocean/p/8075676.html public static void main(String[] args) {     Integer i ...

  9. 设置参数进行java的jvm监控

    1.设置jconsole监控服务器的tomcat参数及java jvm大小,执行命令vi ../tomcat/bin/catalina.sh  “在服务器安装的tomcat目录下” JAVA_OPTS ...

  10. [BZOJ2655]calc(拉格朗日插值法+DP)

    2655: calc Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 428  Solved: 246[Submit][Status][Discuss] ...