开发学院网页设计 JavaScript jquery实现复选框的全选与全部选功能阅读

jquery实现复选框的全选与全部选功能

　2012-11-19 20:03:48　来源：WEB开发网　　　

核心提示： 一：1）引进jquery-1.6.4.min.js文件2）效果图如下：a)默认情况:b)点击全选后并点击提交按钮后：c)当点击个别按钮时：二：代码示例如下： <%@ page language="java" import="java.util.*" pageEncodin

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