您的位置：首页 > Web前端 > JQuery

JQuery实现checkbox的全选/取消全选，实现类似于邮箱功能

2012-12-14 09:31 936 查看

本人初学JQuery。写了一个实现checkbox的全选/取消全选，实现类似于163邮箱功能。

以下是代码，测试全部通过，请勿喷

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Script/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function () {
$("#SelectAll").click(function () {         //全选/取消全选
$(":checkbox").attr("checked", this.checked);
});
$(":checkbox").click(function () {          //当选中某个子复选框时，SelectAll取消选中
if (!this.checked) {
$("#SelectAll").attr("checked", false);
}
});
$(":checkbox").click(function () {
var chsub = $("input[name='subcheck']").length; //获取subcheck的个数
var checkedsub = $("input[name='subcheck']:checked").length; //获取选中的subcheck的个数
if (checkedsub == chsub) {
$("#SelectAll").attr("checked", true);
}
});
});
</script>
</head>
<body>
<input type="checkbox" value="全选" id="SelectAll" />全选/取消全选<br /><br />
<input type="checkbox" value="苹果" name="subcheck"  />苹果<br />
<input type="checkbox" value="雪梨" name="subcheck" />雪梨<br />
<input type="checkbox" value="荔枝" name="subcheck" />荔枝<br />
<input type="checkbox" value="樱桃"name="subcheck" />樱桃

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航