javascript - 以样式格式选择所有或部分父/子复选框

Question

首先:http://jsfiddle.net/1q5st19f/

我有一个复选框组，如果所有子复选框(国家)都被选中，父复选框(地区)也会被选中。同样，如果父复选框未选中，则子复选框也应取消选中。在我使用 prettyCheckable(来自 http://arthurgouveia.com/prettyCheckable/)设置复选框样式之前，我找到了一个完美运行的脚本。

如果我删除 prettyCheckable，它就会起作用。如果我添加它，它的样式是正确的，但将不再起作用。我究竟做错了什么？我尝试重命名这些类，但这也没有用。

基本的标记是这样的

<fieldset>
    <input type="checkbox" class="parentCheckBox" /> Africa 
    <div class="content">   
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" value="1" name="cntrs[]" class="childCheckBox" data-label=""> Algeria<br />
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" value="2" name="cntrs[]" class="childCheckBox" data-label=""> Angola<br />
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" value="3" name="cntrs[]" class="childCheckBox" data-label=""> Benin<br />
</div>
</fieldset> 

Answer 1

prettyCheckable 使这有点棘手。它在文档中说您可以使用 $('#myInput').prettyCheckable('check'); 但我无法让它工作。所以我只是使用 anchor 类 checked 来确定复选框是否被选中。

这可能不是最漂亮的实现，但它确实有效。您应该使代码更加模块化，也许可以重新考虑我快速做出的一些选择。

首先，我从 HTML 中删除了 childCheckBox 并使用选项初始化了 prettyCheckable，这样我就可以将类获取到包装器 div:

// make childCheckboxes prettyCheckable
$('.content input:checkbox').each(function () {
    $(this).prettyCheckable({
        // add this class to the wrapper div created by prettyCheckable
        customClass: "childCheckBox"
    });
});

与parentCheckbox相同:

// make parentCheckBox prettyCheckable
$('input:checkbox.parentInput').prettyCheckable({
    // add this class to the wrapper div created by prettyCheckable
    customClass: "parentCheckBox"
});

我还更改了 childCheckBox 单击事件来执行您想要的功能

//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
    $('.childCheckBox').click(function () {
        var $parentAnchor = $(this).parents('fieldset:eq(0)').find('.parentCheckBox a');
        var $childAnchors = $(this).parents('fieldset:eq(0)').find('.childCheckBox a');
        var $thisAnchor = $(this).find('a');

        var parentIsChecked = $parentAnchor.hasClass('checked');
        var thisIsChecked = $thisAnchor.hasClass('checked');

        var isLastOne = true;
        // loop through all childCheckBoxes and determine if this is the last one checked or unchecked
        $childAnchors.each(function (index) {
            if ((!thisIsChecked && $(this).hasClass('checked'))
                || (thisIsChecked && !$(this).hasClass('checked'))) {
                isLastOne = false;
            }
        });

        // if the childCheckBox was the last one, change the state of the parentCheckBox
        if (isLastOne && thisIsChecked) {
            $parentAnchor.addClass('checked');
        } else if (isLastOne && !thisIsChecked) {
            $parentAnchor.removeClass('checked');
        }
    });

fork 时我很累，所以我希望我没有犯任何愚蠢的错误。如果您对代码有任何疑问，请提出。

fiddle :http://jsfiddle.net/1q5st19f/17/