首先：http://jsfiddle.net/1q5st19f/
我有一个复选框组，如果选中所有子复选框（国家/地区），则也会检查父复选框（区域）。同样，如果未选中父复选框，则也应取消选中子复选框。我找到了一个完美的脚本，直到我使用prettyCheckable设置了复选框（来自http://arthurgouveia.com/prettyCheckable/）。
如果我删除prettyCheckable，它就可以了。如果我添加它，它的样式正确但不再起作用。我究竟做错了什么？我试图重命名这些类，但这也没有用。
基本标记就像
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Africa
<div class="content">
<input type="checkbox" value="1" name="cntrs[]" class="childCheckBox" data-label=""> Algeria<br />
<input type="checkbox" value="2" name="cntrs[]" class="childCheckBox" data-label=""> Angola<br />
<input type="checkbox" value="3" name="cntrs[]" class="childCheckBox" data-label=""> Benin<br />
</div>
</fieldset>
答案 0 :(得分：0)
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"
});
});
与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');
}
});
分叉时我很累，所以我希望我没有犯任何愚蠢的错误。如果您对代码有任何疑问，请询问。
答案 1 :(得分：0)
这让我永远地调试了。有一些问题最重要的是你使用的是非常反面版的prettyCheckable。但是，在更改到最新级别并重新开始之后，我为您提供了一个完整的解决方案。请参阅此jsFiddle。
我从头开始，但这里是代码：
<强> HTML
<fieldset>
<div class="group">
<input type="checkbox" class="parentCheckBox" data-label="Africa"/>
<div class="content">
<input type="checkbox" value="1" class="childCheckBox" data-label="Algeria" />
<br />
<input type="checkbox" value="2" class="childCheckBox" data-label="Angola" />
<br />
<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中显示的备用解决方案。它讨论何时应根据子项检查或取消选中父复选框。
答案 2 :(得分：0)
PrettyCheckable在幕后做的是隐藏复选框并向页面添加a标记，并在点击a标记时更新隐藏的复选框。选中复选框后，a标记的样式也会checked。但是，似乎存在一个错误，当通过代码操作复选框的状态时，checked类不会添加到a标记或从$('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');
}
});标记中删除。无论如何，你的JavaScript正确地更新了复选框的状态，但是prettyCheckable没有检测到它并且无法更新它的类。
无论如何，我重写了你的脚本，所以所有的逻辑都在1个事件处理程序中处理，我包含了一个解决prettyCheckable错误的方法，但我单独留下你的HTML，所以你只需要替换你的JavaScript代码。请参阅下面的可运行示例：
<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">
<input type="checkbox" value="1" name="cntrs[]" class="childCheckBox" data-label="" /> Algeria<br />
<input type="checkbox" value="2" name="cntrs[]" class="childCheckBox" data-label="" /> Angola<br />
<input type="checkbox" value="3" name="cntrs[]" class="childCheckBox" data-label="" /> Benin<br />
</div>
</fieldset>{{1}}