Jquery学习笔记四

最新推荐文章于 2022-11-06 14:59:42 发布

zhangwanfly

最新推荐文章于 2022-11-06 14:59:42 发布

阅读量83

点赞数

分类专栏： JavaScript技术文章标签： jQuery HTML ViewUI

JavaScript技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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


<!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>

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

[img]http://dl.iteye.com/upload/attachment/285112/ad719d5b-3328-3ed3-8e41-f4f240a0a9f3.jpg[/img]
取消其中一个复选框后效果如下

[img]http://dl.iteye.com/upload/attachment/285114/2525b0e0-ee67-36aa-b883-200afbf9b035.jpg[/img]
如果一个都不选的话，就点提交将提示“请选择要操作的数据”

zhangwanfly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习笔记四

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

扫一扫