相思资源网 Design By www.200059.com
jquery 实现复选框的全选操作实例代码
最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。
实现细节如有可改进的地方,不吝赐教。
首先是html部分的代码,这里有一个表格,表格里面有一些选项:
<div id="list">
<table>
<tr><td>选项1<input type="checkbox" name="group" value="1"/></tr>
<tr><td>选项2<input type="checkbox" name="group" value="2"/></tr>
<tr><td>选项3<input type="checkbox" name="group" value="3"/></tr>
</table>
</div>
全选<input type="checkbox" id="all"/>
接下来是jquery:
<script>
$(document).ready(function () {
//全选或全不选
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").attr("checked", true);
} else {
$("#list :checkbox").attr("checked", false);
}
});
//设置全选复选框
$("#list :checkbox").click(function () {
allchk();
});
function allchk() {
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if ($(this).attr("checked")) {
chk++;
}
});
if (chknum == chk) {//全选
$("#all").attr("checked", true);
} else {//不全选
$("#all").attr("checked", false);
}
}
//显示时执行一次
allchk();
});
</script>
当全选框被点击时,判断选中状态,如果是选中,则为所有选项的复选框设置选中属性;如果是取消选中,则为所有选项的复选框取消选中属性。
同时,为每个选项复选框添加判断,当所有的选项复选框都选中时,全选框自动选中;否则,全选框取消选中。这里通过计数来比较(选项的数量和选中的选项数量),通过each方法来进行遍历。
最后,在显示时执行一次,这是确保如果初始状态就是所有选项都选中的状态,要保证全选框也是选中的状态。
参考:jquery中checkbox使用方法简单实例演示
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无jquery 实现复选框的全选操作实例代码的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?