选择样式格式中的所有或某些父/子复选框

prettyCheckable让这有点棘手。文档中说您可以使用$('#myInput').prettyCheckable('check');，但我无法使其工作。因此，我只是使用锚类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"
    });
});

与parent相同复选框：

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

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

Fiddle：http://jsfiddle.net/1q5st19f/17/

这花了我很长时间进行调试。有很多问题，其中最重要的是您使用的是prettyCheckable的一个非常底层的版本。然而，在更改到最新级别并重新开始之后，我为您提供了一个完全有效的解决方案。请参阅此jsFiddle。

我从头开始，但这里是代码：

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>

JavaScript

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

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

检查或取消检查所有子项的语义可以有一个替代的解决方案，如jsFiddle所示。它将讨论何时应根据子项检查或取消检查父项复选框。

prettyCheckable在幕后所做的是隐藏复选框并向页面添加a标记，并在单击a标记时更新隐藏的复选框。选中复选框时，a标记也会获得checked的样式。不过，似乎存在一个错误，即当通过代码操作复选框的状态时，checked类不会添加到a标记中或从中删除。无论如何，您的JavaScript正确地更新了复选框的状态，但prettyCheckable没有检测到这一点，并且未能更新其类。

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

$('input:checkbox').prettyCheckable();
$("input:checkbox").on("change", function() {
  var checkbox = $(this);
  var parent = checkbox.closest("fieldset");
  if (checkbox.hasClass("parentCheckBox")) {
    //this is a parent, check or uncheck all children
    var isChecked = checkbox.is(":checked");
	
    //add checked attribute in the DOM and add the class for prettyCheckable on all children
    parent.find("input.childCheckBox:checkbox").prop("checked", isChecked).each(function() {
      if (isChecked)
        $(this).next("a").addClass('checked');
      else
        $(this).next("a").removeClass('checked');
    });
  } else {
    //this is a child, check or uncheck the parent
    var parentCheckbox = parent.find("input.parentCheckBox:checkbox");
    var isChecked = !parent.find("input.childCheckBox:checkbox").get().some(function(item) {
      return !$(item).is(":checked");
    });
    
    //add the checked attribute to the dom and add the class for prettyCheckable
    parentCheckbox.prop("checked", isChecked);
    if (isChecked)
      parentCheckbox.next("a").addClass('checked');
    else
      parentCheckbox.next("a").removeClass('checked');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://qfuse.com/js/utils/prettyCheckable/prettyCheckable.js"></script>
<link href="http://arthurgouveia.com/prettyCheckable/js/prettyCheckable/dist/prettyCheckable.css" rel="stylesheet"/>
<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>