CheckAll CheckBox Jquery

Question

我使用此代碼來檢查樹狀視圖中的複選框。

HTML：

<div id="tree"> 
    <ul> 
     <li> 
      <input type="checkbox"/> Root 
      <ul> 
       <li> 
        <input type="checkbox"/> Child 1 
        <ul> 
         <li><input type="checkbox"/> Subchild 1</li> 
         <li><input type="checkbox"/> Subchild 2</li> 
         <li><input type="checkbox"/> Subchild 3</li> 
        </ul> 
       </li> 
       <li> 
        <input type="checkbox"/> Child 2 
        <ul> 
         <li><input type="checkbox"/> Subchild 1</li> 
         <li><input type="checkbox"/> Subchild 2</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>​ 

的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); 
       }); 
      }); 
     }); 

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

accroding到您的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/