javascript - 取消选中父级时，jQuery 帮助我需要切换子级复选框

Question

我正在研究一个简单的复选框树

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

如果您单击太平洋 > 加利福尼亚 > 湾区 >，然后单击一个复选框。如果您随后取消选中 Bay Area，则子复选框也会取消选中。到目前为止，一切都很好。我遇到的问题是，如果您再次执行此操作，但这次取消选中“加利福尼亚”，然后再次选中“ bat 区”，则所有子项都未被选中，但如果您选中“湾区”，则切换会相反。

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

$('.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); 
});

Answer 1

您可以触发这些复选框的 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/

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