天易20----jquery实现复选框的全选与全不选功能
一：1）引进jquery-1.6.4.min.js文件
2）效果图如下：
a)默认情况:
b)点击全选后并点击提交按钮后：
c)当点击个别按钮时：
二：代码示例如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title></title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="<%=basePath %>js/jquery-1.6.4.min.js"></script><script type="text/javascript">$(document).ready(function(){ $('#checkedAll').click(function(){ // if(this.checked){/*对默认是否为选中进行判断*/// $('[name=checkboxt]:checkbox').attr('checked',true);/*checked为true时为默认显示的状态,为true实现全选功能*/// }else{// $('[name=checkboxt]:checkbox').attr('checked',false);/*false为反选即为全部选功能*/// }//实现全选全不选的另一种方法$('[name=checkboxt]:checkbox').attr('checked',this.checked);/*checked为true时为默认显示的状态*/ }); //实现反选功能/* $('#checkedRev').click(function(){ $('[name=checkboxt]:checkbox').each(function(){ this.checked=!this.checked; }); });*/ //点击提交按钮查看所选复选框的内容 $('#send').click(function(){ var str="你的爱好是："; $('[name=checkboxt]:checkbox:checked').each(function(){str+=$(this).val()+",";//接收显示所选复选框的内容}); alert(str); }); });</script> <style type="text/css">*{padding:10xp;margin:0;}body {padding-left:100px;padding-top:100px;font-size:12px;font-family:"宋体";}</style> </head><body><form action="" method="post">你的爱好是：<input type="checkbox" id="checkedAll"/>全选/全不选<!-- <input type="checkbox" id="checkedRev"/>反选 --><br/><input type="checkbox" name="checkboxt" value="看书"/>看书<input type="checkbox" name="checkboxt" value="唱歌"/>唱歌<input type="checkbox" name="checkboxt" value="跳舞"/>跳舞<input type="checkbox" name="checkboxt" value="运动"/>运动<br/><input type="button" id="send" value="提交"/></form></body></html>