HTML部分
<input class="checkall" type="checkbox">全选
<br>
<input class="j-checked" type="checkbox">商品1
<br>
<input class="j-checked" type="checkbox">商品2
<br>
<input class="j-checked" type="checkbox">商品3
<br>
<input class="checkall" type="checkbox">全选
<br>
结果:
实现功能:
点击全选时,商品123勾选,同时另一个全选也勾上
再点击时,商品123不勾选,同时另一个全选也不勾选
jQuery部分
$(function () {
$(".checkall").change(function () {
//把三个商品勾选的状态复制给全选按钮
$(".j-checked,.checkall").prop("checked", $(this).prop("checked"))
})
$(".j-checked").change(function () {
//如果三个商品勾选的个数等于商品的个数
if ($(".j-checked:checked").length === $(".j-checked").length) {
//全选按钮勾选
$(".checkall").prop("checked", true);
} else {
//反之,则取消
$(".checkall").prop("checked", false);
}
})
})