您的位置：首页 > Web前端 > JQuery

天易20----jquery实现复选框的全选与全不选功能

2012-11-19 19:43 543 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航