Jquery多選複選框

Question

我使用多個複選框與層次結構..我有父複選框和它的子複選框...高達3 4級..我使用此代碼它工作正常，但我...但我想減少我的代碼..

任何一個，請告訴我..

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 

     jQuery('input[type=checkbox]').change(function() { 
      var id = jQuery(this).attr('id'); 
      var children = jQuery('.parent-' + id).attr('checked', jQuery(this).attr('checked')); 
     }); 

     jQuery("input[class^='parent-']").click(function(){ 
      if(jQuery(this).attr('checked')){ 
       var id = jQuery(this).attr('class'); 
       var parts = id.split('-'); 
       var parent_node = jQuery('.lead-' + parts[1]).attr('checked', jQuery(this).attr('checked')); 
      }else{ 
       var id = jQuery(this).attr('class'); 
       var parts = id.split('-'); 
       if(jQuery(".parent-"+ parts[1]+":checked").length==0) 
       { 
        var parts = id.split('-'); 
        var parent_node = jQuery('.lead-' + parts[1]).removeAttr('checked', jQuery(this).attr('checked')); 
       } 
      } 
     }); 

     jQuery("input[class^='parent-']").each(function(){ 
      if(jQuery(this).attr('checked')){ 
       var id = jQuery(this).attr('class'); 
       var parts = id.split('-'); 
       var parent_node = jQuery('.lead-' + parts[1]).attr('checked', jQuery(this).attr('checked')); 
      }else{ 
       var id = jQuery(this).attr('class'); 
       var parts = id.split('-'); 
       if(jQuery(".parent-"+ parts[1]+":checked").length==0) 
       { 
        var parts = id.split('-'); 
        var parent_node = jQuery('.lead-' + parts[1]).removeAttr('checked', jQuery(this).attr('checked')); 
       } 
      } 
     }); 

    }); 
</script> 

Answer 1

jQuery("input[class^='child-']").click(function(){ 
      var cls = jQuery(this).attr('class'); 
      parts = cls.split('-'); 
      var check = false; 
      jQuery("input[type=checkbox]."+cls).each(function() { 
       if(jQuery(this).is(':checked')) { 
        jQuery("input[type=checkbox].parent-"+parts[1]).attr('checked', 'checked'); 
        check = true; 
       } 
      }); 
      if(!check) { jQuery("input[type=checkbox].parent-"+parts[1]).removeAttr('checked'); } 
     }); 

     jQuery("input[class^='parent-']").click(function() { 
      parts = jQuery(this).attr('class').split('-'); 
      if(jQuery(this).is(':checked')) { 
       jQuery("input[class$='"+parts[1]+"']").attr('checked', 'checked'); 
      } else { 
       jQuery("input[class$='"+parts[1]+"']").removeAttr('checked'); 
      } 
     }); 

Answer 2

您可以通過使用$來代替jQuery的安全地（甚至jQuery.noConflict（））

(function($) { 
    ... inside this code block, $ always is jQuery 
}(jQuery)} 

啓動

然後你的功能作爲參數TER值用於

jQuery的（ 「輸入[類^ = '父 - ']」）。單擊（...）
和
jQuery的（ 「輸入[類^ = '父 - ']」）的每個。 （...）
似乎是相同的。

(function($) { 
    var myFunc = function() { 
     var id = $(this).attr('class'), 
      parts = id.split('-'), 
      parent_node 
     ; 
     if ($(this).attr('checked')){ 
      parent_node = $('.lead-' + parts[1]).attr('checked', $(this).attr('checked')); 
     } else if ($(".parent-"+ parts[1]+":checked").length==0) { 
      parent_node = $('.lead-' + parts[1]).removeAttr('checked'); 
     } 
    } 

    var myFunc2 = function() { 
     var id = $(this).attr('id'); 
     var children = $('.parent-' + id).attr('checked', $(this).attr('checked')); 
    } 

    $(document).ready(function(){ 

     $('input[type=checkbox]').change(myFunc2); 

     $("input[class^='parent-']").click(myFunc); 

     $("input[class^='parent-']").each(myFunc); 

    }); 

}(jQuery)) 

：

以適當的名稱，而不是myFunc的

然後你可以有你的雙assignement出來的，如果開關

導致做起來很

var myFunc = function() { 
... 
} 
jQuery("input[class^='parent-']").click(myFunc) 
jQuery("input[class^='parent-']").each(myFunc) 

這些只是一些轉變。我並沒有改變任何代碼邏輯的（希望）