Jquery实现checkbox的全选,全不选,反选,提交 -

it_iweb

浏览: 9491 次
性别:
来自: 天津

最近访客更多访客>>

wangtong1976

wuzuyu365

wggfxn

葉孤橙

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (18)

社区版块

存档分类

Jquery实现checkbox的全选,全不选,反选,提交

参考链接:http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html

Jquery实现checkbox的全选,全不选,反选,提交;

<span style="font-size:14px;">// 原文代码
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>checkbox list选择</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				// 全选
				$("#btnCheckAll").bind('click', function() {
					$("[name=chkItem]:checkbox").attr("checked", true);
				});
				// 全不选
				$("#btnCheckNone").bind('click', function() {
					$("[name=chkItem]:checkbox").attr("checked", false);
				});
				// 反选
				$("#btnCheckReverse").bind('click', function() {
					$("[name=chkItem]:checkbox").each(function() {
						$(this).attr("checked", !$(this).attr("checked"));
					});
				});
				// 提交
				$("#btnSubmit").bind('click', function() {
					var result = new Array();
					$("[name:chkItem]:checkbox").each(function() {
						if ($(this).is(":checked")) {
							result.push($(this).attr("value"));
						}
					});
					alert(result.join(","));
				});
			});
		</script>
	</head>

	<body>
		<div>
			<input name="chkItem" type="checkbox" value="今日话题" />今日话题
			<input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
			<input name="chkItem" type="checkbox" value="财经" />财经
			<input name="chkItem" type="checkbox" value="汽车" />汽车
			<input name="chkItem" type="checkbox" value="科技" />科技
			<input name="chkItem" type="checkbox" value="房产" />房产
			<input name="chkItem" type="checkbox" value="旅游" />旅游
		</div>
		<div>
			<input id="btnCheckAll" type="button" value="全选" />
			<input id="btnCheckNone" type="button" value="全不选" />
			<input id="btnCheckReverse" type="button" value="反选" />
			<input id="btnSubmit" type="button" value="提交" />
		</div>
	</body>

</html></span>

jquery从table从获取type="checkbox"的input,过滤后,将选中的checkbox选项提交;

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				// chkAll全选事件
				$("#chkAll").bind("click", function() {
					$("[name = chkItem]:checkbox").attr("checked", this.checked);
				});

				// chkItem事件
				$("[name = chkItem]:checkbox").bind("click", function() {
						var $chk = $("[name = chkItem]:checkbox");
						$("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
					})
					// 提交
				$("#btnSubmit").bind('click', function() {
					var result = new Array();
					$("[name:chkItem]:checkbox").each(function() {
						if ($(this).is(":checked")) {
							result.push($(this).attr("value"));
						}
					});
					alert(result.join(","));
				});
				// 重置
				$("#btnReset").bind('click', function() {
					$("[name=chkItem]:checkbox").attr("checked", false);
				});
			});
		</script>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}
			td {
				border: 1px solid #ccc;
			}
		</style>
	</head>

	<body>
		<table id="tb">
			<thead>
				<tr>
					<td>
						<input id="chkAll" type="checkbox" />
					</td>
					<td>
						分类名称
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input name="chkItem" type="checkbox" value="今日话题" />
					</td>
					<td>
						今日话题
					</td>
				</tr>
				<tr>
					<td>
						<input name="chkItem" type="checkbox" value="视觉焦点" />
					</td>
					<td>
						视觉焦点
					</td>
				</tr>
				<tr>
					<td>
						<input name="chkItem" type="checkbox" value="财经" />
					</td>
					<td>
						财经
					</td>
				</tr>
				<tr>
					<td>
						<input name="chkItem" type="checkbox" value="汽车" />
					</td>
					<td>
						汽车
					</td>
				</tr>
				<tr>
					<td>
						<input name="chkItem" type="checkbox" value="科技" />
					</td>
					<td>
						科技
					</td>
				</tr>
				<tr>
					<td>
						<input name="chkItem" type="checkbox" value="房产" />
					</td>
					<td>
						房产
					</td>
				</tr>
				<tr>
					<td>
						<input name="chkItem" type="checkbox" value="旅游" />
					</td>
					<td>
						旅游
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input name="" value="提交" type="button" id="btnSubmit" style="width: 100%;"/>
					</td>
				</tr>
			</tbody>
		</table>
	</body>

</html>

应用小demo-获取选中checkbox选项后,jquery ajax向后台发送请求

$(function() {
		// 提交时,把选中的URL集合传给privilegeForm
		$("#btnSubmit").bind('click', function() {
			var result = new Array();
			$("[name:url]:checkbox").each(function() {
				if ($(this).is(":checked")) {
					result.push($(this).attr("value"));
				}
			});
			alert(result.join(","));
			var params = {
				uid:$("#uid").val(),
				urls:result
			};
			alert(params);
			$.ajax({
				url:"addPrivilege.do",
				data:params,
				type:'post',
				dataType:'json',
				success:function(){
					alert("权限管理操作完成!");
				},
				error:function(){
					alert("操作失败!返回权限管理页面!");
				}
			});
		});
});

分享到：