html checkbox 实现全选/取消全选

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>

效果图:

时间: 2024-10-29 00:31:05

html checkbox 实现全选/取消全选的相关文章

checkbox全选/取消全选

//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $("input[name='cbxCommodity']").prop("checked","checked"); }else{ $("input[name='cbxCommodity']").removeAttr("check

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

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

全选/取消全选那点事

今天我花了半天时间处理checkbox全选/取消全选那点事 技术领域 可信计算 其他   全选 申请日 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016  年  至 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 至今 年 专利类型 发明专利 实用新型   全选 授权

jquery全选/取消全选(反选)/单选操作

使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body>    <div>        <input id="checkAll" type="checkbox" />全选        <input name="subBox" type="checkbox" />

jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn])   --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn])     --> 当元素失去焦点时,触发 blur 事件 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></ti

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

刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

jquery checkbox勾选/取消勾选的诡异问题

<form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" v

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

jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />        <input type="checkbox" name="items" value="足球"

jquery全选,取消全选

最近项目又用到了这个全选和取消全选的操作. 以前总是自己写纯JS.现在既然知道怎么写了.那如何用JQ写得更简洁呢.这样也能学到新的东西.如果乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码如下: [javascript] view plaincopy <script type="text/javascript" src="/web/bzz_index/password/js/jquery-1.7.1.min.js"></script&g