Javascript 以样式化格式选择所有或某些父/子复选框

首先:

我有一个复选框组，如果选中了所有子复选框（国家），则父复选框（地区）也会被选中。同样，如果父复选框未选中，则子复选框也应未选中。我找到了一个工作完美的脚本，直到我用prettyCheckable（from）设置了复选框的样式

如果我删除了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> 

非洲
阿尔及利亚

安哥拉

贝宁

prettyCheckable让这有点棘手。文档中说您可以使用

$（'#myInput'）。prettyCheckable（'check'）但我无法让它工作。因此，我只是使用anchors类
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 click事件以实现您想要的功能

//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');
        }
    });

我用叉子叉这个的时候很累，所以我希望我没有犯任何愚蠢的错误。如果您对代码有任何疑问，请询问

小提琴：
我花了很长时间调试。有许多问题，其中最重要的是，您正在使用prettyCheckable的一个非常底层的版本。但是，在切换到最新级别并重新开始之后，我为您提供了一个完全有效的解决方案。看这个

我从头开始重新开始，但代码如下：

HTML

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

我很乐意回答您的任何问题

选中或取消选中所有子项的语义可以有一个替代解决方案，如图所示。它与作为子项功能的父复选框何时应被选中或取消选中有关。
prettyCheckable在幕后的作用是隐藏复选框并向页面添加一个
a
标记，并在单击
a
标记时更新隐藏的复选框。选中复选框时，
a
标记也会获得
checked
的样式。不过，似乎存在一个bug，即当通过代码操纵复选框的状态时，
checked
类不会添加到
a
标记或从中删除。无论如何，您的JavaScript正确地更新了复选框的状态，但是prettyCheckable没有检测到这一点，并且未能更新其类

无论如何，我重写了你的脚本，所以所有的逻辑都在一个事件处理程序中处理，我还包括了一个解决prettyCheckable bug的方法，但是我没有处理你的HTML，所以你只需要替换你的JavaScript代码。请参阅下面的可运行示例：


$（'input:checkbox'）。prettyCheckable（）；
$（“输入：复选框”）。打开（“更改”，函数（）{
var复选框=$（此）；
var parent=checkbox.closest（“字段集”）；
if（checkbox.hasClass（“parentCheckBox”））{
//这是父项，请选中或取消选中所有子项
var isChecked=checkbox.is（“：checked”）；
//在DOM中添加checked属性，并为所有子级添加prettyCheckable类
parent.find（“input.childCheckBox:checkbox”）.prop（“checked”，isChecked）.each（函数（）{
如果（已检查）
$（this.next（“a”）.addClass（“checked”）；
其他的
$（this.next（“a”）.removeClass（“选中”）；
});
}否则{
//这是一个子项，请选中或取消选中父项
var parentCheckbox=parent.find（“input.parentCheckbox:checkbox”）；
var isChecked=！parent.find（“input.childCheckBox:checkbox”）.get（）.some（函数（项）{
return！$（item）.is（“：checked”）；
});
//将checked属性添加到dom中，并为prettyCheckable添加类
parentCheckbox.prop（“选中”，已选中）；
如果（已检查）
parentCheckbox.next（“a”）.addClass（“checked”）；
其他的
parentCheckbox.next（“a”）.removeClass（“选中”）；
}
});

非洲
阿尔及利亚

安哥拉

贝宁

查看此页面。。。我看到这个类有一个方法可以显式地选中或取消选中复选框。可能这个类没有使用“checked”属性来切换它的checked状态？这是有道理的…但是我对jQuery了解不够，不知道这是否意味着根本不可能？
$(function () {
    $('input:checkbox').each(function () {
        $(this).prettyCheckable();
    });

    $(".parentCheckBox").change(function (e) {
        var checked = $(this).prop("checked");
        $(".childCheckBox", $(this).closest(".group")).each(function (i, e) {
            $(e).prettyCheckable(checked?"check":"uncheck");
        });
    });

    $(".childCheckBox").change(function(e) {
        var checkedCount = unCheckedCount = 0;
        $(e.currentTarget).closest(".content").find(".childCheckBox").each(function(i,e2) {
            if ($(e2).prop("checked")) {
                checkedCount++;
            } else {
                unCheckedCount++;
            }
        });
        if (unCheckedCount == 0) {
            $(e.currentTarget).closest(".group").find(".parentCheckBox").prettyCheckable("check");
        } else {
            $(e.currentTarget).closest(".group").find(".parentCheckBox").prettyCheckable("uncheck");
        }
    });
});