<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <title>Insert title here</title> <script type="text/javascript"> $(function(){ //全选 $("#selAll").click(function(){ //获取所有复选框，设置checked属性 $("input[type=‘checkbox‘]").attr("checked","checked"); }); //全不选 $("#selNo").click(function(){ $("input[type=‘checkbox‘]").removeAttr("checked"); }); //在boxId上绑定点击的事件，判断当前复选框是否被选中，如果被选中，3个爱好都被选中 $("#boxId").click(function(){ //判断当前复选框是否被选中 if($(this).attr("checked")=="checked"){ $("input[type=‘checkbox‘]").attr("checked","checked"); }else{ $("input[type=‘checkbox‘]").removeAttr("checked"); } }); //在爱好上绑定事件 $("input[name=‘hobby‘]").click(function(){ //判断3个爱好被选中的个数 if($("input[name=‘hobby‘]:checked").size()==3){ //全被选中了 $("#boxId").attr("checked","checked"); }else{ $("#boxId").removeAttr("checked"); } }); }); </script> </head> <body> <h3>全选全不选</h3> <input type="checkbox" id="boxId" />全选/全不选<br/> <input type="checkbox" name="hobby" />抽烟<br/> <input type="checkbox" name="hobby" />喝酒<br/> <input type="checkbox" name="hobby" />烫头<br/> <input type="button" value="全选" id="selAll"/> <input type="button" value="全不选" id="selNo"/> </body> </html>