动态选中/取消选中树中的复选框
我有一个类似于Uncheck父节点的问题， 如果在JQuery中取消选中所有子节点 （使用此解决方案）并尝试修改它，以便子节点也将取消选中父节点未选中（上面/下面无法执行）。
上面的JSFiddle（ http://jsfiddle.net/fRxVs/ ）
jQuery.each(jQuery('#treeList ul li').find(':checkbox'), function(){ jQuery(this).change(function (){ if (jQuery(this).is(':checked')) { jQuery(this).parentsUntil('#treeList').siblings().filter('input:checkbox').attr('checked', true).trigger('change'); }else{ jQuery(this).parents('ul:first').siblings('input:checkbox').prop('checked', $(this).parent().siblings().children('input:checked').length).trigger('change'); } }); }); 虽然我不知道为什么，但我不得不将prop从最后一行改为attr ，以便它因为某种原因在本地正确地作为JSFiddle工作……
基本上我有3级设置：
Grand-Parent - Parent -- Child
- 如果选中/取消选中
grandparent，则其子女和孙子女也应该被选中/取消选中。 - 如果选中/取消选中
parent，则应检查/取消选中其子级及其父级。 - 如果检查子项，则应检查其父项和祖父项（如果未检查子项，则不应检查父项）。
我正在尝试将其更改为大陆，国家，地区 – 我想你会理解我是否只是这样说….
谢谢
这是解决方案： 小提琴： http ： //jsfiddle.net/fRxVs/55/
$('#treeList :checkbox').change(function (){ $(this).siblings('ul').find(':checkbox').prop('checked', this.checked); if (this.checked) { $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true); } else { $(this).parentsUntil('#treeList', 'ul').each(function(){ var $this = $(this); var childSelected = $this.find(':checkbox:checked').length; if (!childSelected) { $this.prev(':checkbox').prop('checked', false); } }); } });
修改和解释
-
$与jQuery完全相同。 使用它时要保持一致：只有在你不确定$ === jQuery（是否被覆盖？）时才应该使用$ === jQuery。 -
:checkbox是一个匹配每个input[type="checkbox"]的选择器。 指定input:checbkox是过时的，因为checkbox元素始终是输入元素。 -
.find(..)寻找匹配选择器的子元素（不是直接子元素.find(..)的任何元素。"#treeList :checkbox"更快，并且具有与$('#treeList').find(':checkbox')相同的结果$('#treeList').find(':checkbox')。 - 将属性/方法/事件添加到jQuery对象时，将修改与选择器匹配的所有元素。 因此，您不必单独遍历每个元素：
jQuery.each(jQuery('#treeList :checkbox'), function(){ jQuery(this).change(...)})可以缩短为jQuery('#treeList :checkbox').change(...)。 - 更改复选框检查状态后，您不必触发
change，因为该function已经处理完整的树。
老问题，但你可以这样做：
$('input[type=checkbox]').change(function(){ $(this).next().find('input[type=checkbox]').prop('checked', this.checked); $(this).parents('ul').prev('input[type=checkbox]').prop('checked', function(){ return $(this).next().find(':checked').length; }); });
小提琴： http ： //jsfiddle.net/ojc1qg1f/