使用JQUERY檢查樹中的所有子複選框

我希望能夠檢查父複選框並同時檢查子複選框。我可以得到底部父級複選框來實現這一點，但底部父級複選框上方的父級複選框都不起作用。奇怪地檢查一個孩子會迫使父母正確檢查。此代碼旨在用於從數據庫中提取數據的樹視圖中。使用JQUERY檢查樹中的所有子複選框

<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>

來源

2013-01-02 Michael Turner

I had answered another one question like this same.

CheckAll CheckBox Jquery。

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

$(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; 
         }); 
        } 
       }); 
      }); 

<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>

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

Demo。

來源

2013-01-03 15:13:52 Thulasiram

你需要激動人心的相同或不同？ – Thulasiram

謝謝！這使我朝着正確的方向前進。我現在正確地工作。 –

$('#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; 
     }); 
    } 
})

使用「上」，而不是過時的「活」使用到位添加擴展的「輸入：沒有（選中）」。

來源

2015-10-24 03:52:31 BaSingWolf

使用JQUERY檢查樹中的所有子複選框

回答

相關問題