我希望能够选中父复选框并同时选中子复选框。我可以获得底部父复选框来实现此目的，但底部父复选框上方的所有父复选框都不起作用。奇怪的是，检查 child 会强制 parent 正确检查。此代码旨在用于从数据库中提取数据的 TreeView 。
<script language="Javascript">
$.fn.linkNestedCheckboxes = function () {
var childCheckboxes = $(this).find('input[type=checkbox] ~ ul li input[type=checkbox]');
childCheckboxes.change(function(){
var parent = $(this).closest("ul").prevAll("input[type=checkbox]").first();
var anyChildrenChecked = $(this).closest("ul").find("li input[type=checkbox]").is(":checked");
$(parent).prop("checked", anyChildrenChecked);
});
// Parents
childCheckboxes.closest("ul").prevAll("input[type=checkbox]").first().change(function(){
$(this).nextAll("ul").first().find("li input[type=checkbox]")
.prop("checked", $(this).prop("checked"));
});
return $(this);
};
$(window).load(function () {
$("form").linkNestedCheckboxes();
});
</script>
<html>
<form>
<ul id="N0_1" class="tree" style="display: block;">
<li id="F0_10" class="folderOpen">
<input type="checkbox" value="31" name="folderID">
<a class="treeview" href="javascript:toggle('N0_1_0','F0_10')">Test AI File</a>
<ul id="N0_1_0" class="tree" style="display: block;">
<li id="D0_1_00" class="file" style="list-style-image: url(../manage/images/document.gif);">
<input type="checkbox" value="31|859" name="documentID">
AAA5083
</li>
<li id="D0_1_01" class="file" style="list-style-image: url(../manage/images/document.gif);">
<input type="checkbox" value="31|1024" name="documentID">
Test Indd File
</li>
</ul>
</li>
<li id="F0_10" class="folderOpen">
<input type="checkbox" value="31" name="folderID">
<a class="treeview" href="javascript:toggle('N0_1_0','F0_10')">Test AI File</a>
<ul id="N0_1_0" class="tree" style="display: block;">
<li id="D0_1_00" class="file" style="list-style-image: url(../manage/images/document.gif);">
<input type="checkbox" value="31|859" name="documentID">
AAA5083
</li>
<li id="D0_1_01" class="file" style="list-style-image: url(../manage/images/document.gif);">
<input type="checkbox" value="31|1024" name="documentID">
Test Indd File
</li>
</ul>
</li>
</ul>
</form>
</html>
最佳答案
$('#tree input:checkbox').on('change', function () {
$(this).next('ul').find('input:checkbox').prop('checked', $(this).prop('checked'));
for (var i = $('#tree').find('ul').length - 1; i >= 0; i--) {
$('#tree').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
return $(this).next('ul').find('input:not(:checked)').length === 0 ? true : false;
});
}
})
使用“on”而不是过时的“live” 使用“input:not(:checked)”代替添加扩展器。
关于jquery - 使用 JQUERY 检查树中的所有子复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14129628/