WEB开发网
开发学院网页设计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>

Tags:jquery 实现 复选框

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接