用jQuery实现首先代码中有一个一级复选框三个二级复选框还有六个三级复选框每个二级复选框对应了两个三级复选框当其中有两个三级复选框被选中时对应的二级复选框自动选中当所有的二级复选框被选中时一级复选框自动选中!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=I
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 二级选择框绑定change事件
$('.checkall').change(function () {
// 获取当前二级选择框对应的三级选择框
var checkboxes = $(this).parent().nextAll().find('.j-checkbox');
// 如果当前二级选择框被选中,将对应的三级选择框全部选中
if ($(this).prop('checked')) {
checkboxes.prop('checked', true);
} else {
// 否则将对应的三级选择框全部取消选中
checkboxes.prop('checked', false);
}
// 触发一级选择框的change事件
$('.checkalls').trigger('change');
});
// 三级选择框绑定change事件
$('.j-checkbox').change(function () {
// 获取当前三级选择框所在的二级选择框
var parent = $(this).parent().prev();
// 获取当前二级选择框对应的所有三级选择框
var checkboxes = parent.next().find('.j-checkbox');
// 获取被选中的三级选择框的数量
var checkedNum = checkboxes.filter(':checked').length;
// 如果被选中的三级选择框的数量为2,将对应的二级选择框选中
if (checkedNum == 2) {
parent.prop('checked', true);
} else {
// 否则将对应的二级选择框取消选中
parent.prop('checked', false);
}
// 触发一级选择框的change事件
$('.checkalls').trigger('change');
});
// 一级选择框绑定change事件
$('.checkalls').change(function () {
// 获取所有二级选择框的数量
var len = $('.checkall').length;
// 获取被选中的二级选择框的数量
var checkedLen = $('.checkall:checked').length;
// 如果被选中的二级选择框的数量等于所有二级选择框的数量,将对应的一级选择框选中
if (checkedLen == len) {
$(this).prop('checked', true);
} else {
// 否则将对应的一级选择框取消选中
$(this).prop('checked', false);
}
});
</script
原文地址: https://www.cveoy.top/t/topic/cw02 著作权归作者所有。请勿转载和采集!