<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
</head>
<body>
<form>
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
<script src="jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
功能说明:
- 点击'全选': 选中所有爱好
- 点击'全不选': 所有爱好都不勾选
- 点击'反选': 改变所有爱好的勾选状态
- 点击'全选/全不选': 选中所有爱好, 或者全不选中
- 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
- 点击'提交': 提示所有勾选的爱好
*/
items =
checkedAllBox =
('#checkedAllBtn').click(function () {
checkedAllBox.prop('checked',true);
})
// 2. 点击'全不选': 所有爱好都不勾选
items.prop('checked',false);
('#checkedRevBtn').click(function () {
checkedAllBox.prop('checked',
checkedAllBox.click(function () {
items.click(function () {
items.filter(':not(:checked)').length === 0)
})
// 6. 点击'提交': 提示所有勾选的爱好
items.filter(':checked').each(function () {
alert(this.value);
})
})
})
</script>
</body>
</html>
网友评论