jQuery 对复选框的简单应用

最新推荐文章于 2022-12-11 12:48:13 发布

aimartt

最新推荐文章于 2022-12-11 12:48:13 发布

阅读量672

点赞数

分类专栏： jQuery 文章标签： jquery function input html javascript string

本文链接：https://blog.csdn.net/aimartt/article/details/7873263

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 对复选框的简单应用

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

页面初始化后效果如图：

代码如下：

<%@ 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>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//"全选/取消全选"元素 click 事件
				$("#checkAll").click(function() {
					$(":checkbox[name = games]").attr("checked", $(this).is(":checked"));
				});
				
				//反选按钮 click 事件
				$("#toggle").click(function() {
					$(":checkbox[name = games]").each(function() {
						$(this).attr("checked", !$(this).attr("checked"));
						//this.checked = !this.checked;	//可用原生 JavaScript 简化上句代码
					});
					setCheckedState();
					return false;		//阻止表单提交
				});
				
				//选项元素 click 事件
				$(":checkbox[name = games]").click(function() {
					setCheckedState();
				});
			});	
			
			//设置"全选/取消全选"元素的勾选状态
			function setCheckedState() {
				//获取选项元素
				var $checkboxes = $(":checkbox[name = games]");
				//根据选项元素的勾选状态，设置"全选/取消全选"元素的勾选状态
				$("#checkAll").attr("checked", $checkboxes.length == $checkboxes.filter(":checked").length);
			}
		</script>  	
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<form>
  			你玩过的游戏有：
  			<input type="checkbox" id="checkAll" />全选/取消全选
  			<button id="toggle">反选</button><br /><br />
  			<input type="checkbox" name="games" value="World Of Warcraft" />World Of Warcraft
  			<input type="checkbox" name="games" value="Warcraft" />Warcraft
  			<input type="checkbox" name="games" value="Starcraft" />Starcraft
  			<input type="checkbox" name="games" value="Diablo" />Diablo
  		</form>
  	</body>
</html>

aimartt

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 对复选框的简单应用

jQuery 对复选框的简单应用参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社页面初始化后效果如图：代码如下：<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServ
复制链接

扫一扫

专栏目录