复选框全选

先给大家看一下复选框刚开始的样子,大概差不多就是下图这个样了,由于页面上的复选框有点多截图截不完所以只能截一部分做代表。
复选框全选
下面是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。各位也可以试一下对全选这个复选框直接进行判断,看是否会有问题,可能是因为我功力尚浅导致判断失败也不奇怪。
完成的效果是像下面这张图一样的,如果觉得原生复选框不太好看可以试一下自己定义一个自己喜欢的复选框样式。点击全部合格可以实现全选和取消全选,但是我认为里面少了一些判断,做得还不算完善。在这里给大家说一下,我认为缺少的判断。以下图为例,如果勾选了全部合格后,直接取消其中一个合格,全部合格的勾依然存在。如果想勾选了全部合格后,直接取消其中一个合格,全部合格的勾也不存在这就要再做判断了。这个问题我会解决的但不是现在,各位可以自己动手试一下。
复选框全选
这次的介绍就到这里结束了,感谢各位的观看。