JQuery实现复选框全选或全不选

第一、前言
在做前端开发时,经常会遇到对复选框的全选或全不选,本文主要探讨JQuery实现方式。
第二、下载JQuery开发包
下载地址:jquery.validate+jquery.form.rar
第三、代码示例

<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>全选</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.js"></script>
<script type="text/javascript">
//第一种
/*function checkAll(obj){
 	$("input[name='userIdList']").each(function(){
 		$(this).attr("checked",$(obj).eq(0).attr('checked'));
 	});
}*/
//第二种
function checkAll(obj){
	$('input[name="userIdList"]').attr("checked",obj.checked);
}
//提交时,判断复选框勾选的个数:var size=$("input[name='userIdList']:checked").size();
</script>
</head>
<body>
<table cellpadding="1" cellspacing="1" align="center" border="1"  width="300px;">
<tr>
  <th width="50%">全选<input type="checkbox" name="check" id="check" onclick="checkAll(this);"/></th>
  <th width="50%">姓名</th>
</tr>
<tr>
  <td><input type="checkbox" name="userIdList" value="1"/></td>
  <td>曹操</td>
</tr>
<tr>
  <td><input type="checkbox" name="userIdList" value="2"/></td>
  <td>刘备</td>
</tr>
<tr>
  <td><input type="checkbox" name="userIdList" value="3"/></td>
  <td>孙权</td>
</tr>
</table>
</body>
</html>

第四,运行
JQuery实现复选框全选或全不选_第1张图片
欢迎大家积极留言交流学习心得,点赞的人最美丽,谢谢!

你可能感兴趣的:(JQuery)