CheckAll CheckBox Jquery

我使用此代码检查树视图中的复选框。

HTML：

 
 
  Root 
 
  Child 1 
 
 Subchild 1
 
 Subchild 2
 
 Subchild 3
 
 
 
  Child 2 
 
 Subchild 1
 
 Subchild 2
 
 
 
 
 
 
​ 

JavaScript的：

 $(document).ready(function() { $("#tree input:checkbox").change(function() { var val = $(this).attr("checked"); $(this).parent().find("input:checkbox").each(function() { if (val) { $(this).attr("checked", "checked"); } else { $(this).removeAttr("checked"); } }); }); });​ 

JSFiddle： http ： //jsfiddle.net/jRAcq/

这很好用。 但是，如果未选中任何一个子节点，则取消选中根/子根。 我怎么能这样做？

Answer 1

试试这个…

 $(document).ready(function() { $("#tree input:checkbox").change(function() { var val = $(this).attr("checked"); $(this).parent().find("input:checkbox").each(function() { if (val) { $(this).attr("checked", "checked"); } else { $(this).removeAttr("checked"); $(this).parents('ul').each(function(){ $(this).prev('input:checkbox').removeAttr("checked"); }); } }); }); 

}）;

Answer 2

  $(document).ready(function () { $.extend($.expr[':'], { unchecked: function (obj) { return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked')); } }); $("#tree input:checkbox").live('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:unchecked').length === 0 ? true : false; }); } }); }); 

现场演示请看这个链接： http ： //jsfiddle.net/nanoquantumtech/JfMCP/

//要么

  $(document).ready(function () { $.extend($.expr[':'], { unchecked: function (obj) { return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked')); } }); jQuery.fn.reverse = [].reverse; $("#tree input:checkbox").live('change', function () { $(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked")); $('#tree').find("input:checkbox + ul").reverse().each(function () { $(this).prev('input:checkbox').prop('checked', $(this).find('input:unchecked').length === 0 ? true : false); }); }); }); 

// ================================================ ================================== //

你的html jquery代码如下：

 $(document).ready(function () { $.extend($.expr[':'], { unchecked: function (obj) { return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked')); } }); jQuery.fn.reverse = [].reverse; $('#PagesTree').find('input:checkbox').live('change', function () { $('#' + $(this).attr('name').replace(/CheckBox/g, '') + 'Nodes').find('input:checkbox').prop('checked', $(this).prop("checked")); $('#PagesTree').find('input:checkbox').reverse().each(function () { var obj = $('#' + $(this).attr('name').replace(/CheckBox/g, '') + 'Nodes'); if (obj.find('input:checkbox').length > 0) $(this).prop('checked', obj.find('input:unchecked').length === 0 ? true : false); }); }); }); 

现场演示请看这个链接： http ： //jsfiddle.net/nanoquantumtech/GmT7U/