Jquery学习笔记四

fengfeng925

浏览: 107069 次
性别:
来自: 北京

最近访客更多访客>>

lvtt

hanwei2533

zhlzhen

laowangwww

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript技术

jQuery HTML

今天做个小例子，实现复选框的全选。具体是这样的，当选中全选时候，复选框被全部选中，当取消其中一个复选框的按钮后，“全选”框的按钮也取消。当一个复选框也不选的时候，提示“请选择要操作的数据”。只有选中后才可以提交。多的废话不说了，直接贴代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/animation.css" type="text/css">
		<style type="text/css">
		</style>
        <script type="text/javascript" src="js/jquery-1.3.1.js">
        </script>
        <script type="text/javascript">
				$(function() {
					$("#CheckedAll").click(function() {
						$('[name:items]:checkbox').attr("checked", this.checked); //实现全选与全不选
					});
					$('[name=items]:checkbox').click(function() {
						var flag = true;
						$('[name=items]:checkbox').each(function() {
							if(!this.checked) {
								flag = false;
							}
						});
						$("#CheckedAll").attr('checked', flag);
					});
					$("#send").click(function() {
						var len = $('[name=items]:checkbox:checked').each().length;
						if(len == 0){
							alert("请选择要操作的数据");
						}else {
							$("#form").submit();
						}
						return false; 
					})
				})
        </script>
        <title>Jquery Form Test</title>
    </head>
	<body>
		<form id="form" action="test.html">
			你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
			<input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="羽毛球"/>羽毛球
			<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
			<input type="submit" id="send" value="提　交"/> 
		</form>
    </body>
</html>

显示效果，如果全选后，效果如下