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>
《锋利的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>