一: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>