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. docker从零开始（四）集群初体验，docker-machine swarm

    介绍 在第三节中,选择了第二节中编写的应用程序,并通过将其转换为服务来定义它应如何在生产中运行,并生成五个应用实例 在本节中,将此应用程序部署到群集上,在多台计算机上运行它.多容器,多机应用程序通过连 ...

  2. Photoshop CC 2015

    1.Ctrl 加 + -号实现放大缩小2.Ctrl+T 自由变换3.Ctrl+D 取消选区,再选择处理完后想要选中别的区域的话要取消之前选中的区域,要不然之前的区域一直都是选中状态4.F12 将文件恢 ...

  3. Spring Mvc中@ResponseBody中文乱码解决,以及修改返回的Content-Type

    http://www.codeif.com/topic/784 spring 3 mvc 的 @ResponseBody返回数据用起来很方便,但是中文乱码,而且返回的Content-Type不带编码信 ...

  4. sybase ase 重启

    sybase ase 重启 https://blog.csdn.net/davidmeng10/article/details/50344305 https://blog.csdn.net/wengy ...

  5. axis2

    下载axis2-1.5.4-bin.zip文件并解压. 设置axis2的环境变量,如下图所示: 利用axis2中的wsdl2java.bat生成客户端程序. 先启动Tomcat7并在IE里运行http ...

  6. ionic 之环境的搭建

    在ionic的学习中,首先要做的就是环境的搭建,接下来我对从一开始环境的搭建做了记录,以及过程中遇到的问题. 1.安装环境 1.1 安装Node.js Node.js建议安装最新版本,下载地址:htt ...

  7. 关于Promise 简单使用理解

    在学一个新的知识的时候,我的总结是首先要具备相关的基础知识,其次就是可以静下心来能看进去去理解,看一两遍不懂,就看四五遍,甚至六七遍,每一遍都认真努力理解,总会学会的. Promise是一个构造函数, ...

  8. 前端学习blog

    有一些js写的小游戏,很有趣  http://oldj.net

  9. 如何在Android Studio中创建jniLib和asset文件夹 2

    1.创建asset文件夹 如图进行操作 2.创建jniLib文件夹 —打开app下面的gradle文件(不是project的gradle) —在gradle文件的Android标签里面添加 sourc ...

  10. HDU1009：FatMouse' Trade(初探贪心，wait)

    FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the warehouse containi ...