复选框全选

先给大家看一下复选框刚开始的样子,大概差不多就是下图这个样了,由于页面上的复选框有点多截图截不完所以只能截一部分做代表。
在这里插入图片描述
下面是HTML中的将要被全选与点击全选复选框,可以通过点击它实现对其他的复选框是否选中进行操作。如果你只想对你所有的复选框中的一部分进行操作的话,可以通过加class类或者把name名字写上加以区分。

其他设施 其他设施齐全完好 合格? 车主签名: 全部合格

下面就是控制是否全选的核心代码了哦,代码很简单就是给全选复选框一个点击事件,点击后再对这个全选框判断是否存在checked这个类,是无这个类进行全选还是有这个类进行取消全选。判断完了以后对全选框(简称)如果没有就加上这个类或者有了这个类就减去这个类,方便下一次操作。同时对需要的复选框选中,或者取消选中。就这样就可以做到点击全选或取消全选了。
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲tdl").click(fun…(this).hasClass(“checked”)) {
$(this).addClass(“checked”);
$("[type=‘checkbox’]").attr(“checked”, true);//全选
}
else {
$(this).removeClass(“checked”);
$("[type=‘checkbox’]").removeAttr(“checked”);//取消全选
}
});
至于我为什么不直接对全选复选框进行判断这个问题,我觉得可以解释一下。我一开始是直接对全选框进行判断的但是这样会有各种问题涌现,而且效果半有半无的。就只好果断的换方法实现内容了,直接改用类来判断复选框是否选中,至此再无差错,全选和取消全选都OK。各位也可以试一下对全选这个复选框直接进行判断,看是否会有问题,可能是因为我功力尚浅导致判断失败也不奇怪。
完成的效果是像下面这张图一样的,如果觉得原生复选框不太好看可以试一下自己定义一个自己喜欢的复选框样式。点击全部合格可以实现全选和取消全选,但是我认为里面少了一些判断,做得还不算完善。在这里给大家说一下,我认为缺少的判断。以下图为例,如果勾选了全部合格后,直接取消其中一个合格,全部合格的勾依然存在。如果想勾选了全部合格后,直接取消其中一个合格,全部合格的勾也不存在这就要再做判断了。这个问题我会解决的但不是现在,各位可以自己动手试一下。
在这里插入图片描述
这次的介绍就到这里结束了,感谢各位的观看。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值