jQuery帮助取消勾选父，我需要切换孩子复选框

jQuery help when unchecking parent I need to toggle the children checkboxes

本文关键字：复选框 孩子 取消 帮助 jQuery      更新时间：2023-09-26

我正在制作一个简单的复选框树

http://jsfiddle.net/9dvR5/1/

如果你点击太平洋>加利福尼亚>海湾地区>然后一个复选框。如果你取消了旧金山湾区儿童复选框。到目前为止一切顺利。我遇到的问题是，如果您再次执行此操作，但这次取消选中加利福尼亚，然后再次选中Bat Area，所有子区域都未选中，但如果您选中Bay Area，切换将被逆转。

如何取消或防止这种情况发生。

$('.region-group-checkbox').click(function() {
    $(this).siblings('.region-state').toggle();
    $(this).siblings().next().find(':checkbox').prop('checked', false); 
});
$('.region-state-checkbox').click(function() {
    $(this).siblings('.region-state-area').toggle();
    $(this).siblings().next().find(':checkbox').prop('checked', false); 
});   
$('.region-state-area-checkbox').click(function() {
    $(this).siblings('.region-state-area-sub').toggle();
    $(this).siblings().next().find(':checkbox').prop('checked', false); 
});

您可以为这些复选框触发click事件，而不是将属性checked设置为false。

$('.region-group-checkbox').click(function () {
    $(this).siblings('.region-state').toggle();
    $(this)
        .siblings()
        .next()
        .find(':checkbox:checked')
        .trigger('click');
});
$('.region-state-checkbox').click(function () {
    $(this).siblings('.region-state-area').toggle();
    $(this)
        .siblings()
        .next()
        .find(':checkbox:checked')
        .trigger('click');
});
$('.region-state-area-checkbox').click(function () {
    $(this).siblings('.region-state-area-sub').toggle();
    $(this)
        .siblings()
        .next()
        .find(':checkbox:checked')
        .trigger('click'); 
});
http://jsfiddle.net/9dvR5/2/

这可能不是最优雅的解决方案，但应该易于理解。

相关文章：