2017-05-29 35 views
0

你好,我需要有一個不確定的複選框,當我點擊一個複選框時,必須自動選中此複選框下的複選框。html問題模板複選框

我不知道這段代碼有什麼問題,這個屬性不起作用。 我認爲問題是與JS代碼。

<html> 

    <style> 
     body { 
     padding: 20px; 
      } 
     ul { 
     list-style: none; 
     margin: 5px 20px; 
     } 
     li { 
     margin: 10px 0; 
     } 
    </style> 

    <script language="Javascript"> 
     $('input[type="checkbox"]').change(function(e) { 

     var checked = $(this).prop("checked"), 
     container = $(this).parent(), 
     siblings = container.siblings(); 

     container.find('input[type="checkbox"]').prop({ 
     indeterminate: false, 
     checked: checked }); 


     function checkSiblings(el) { 

     var parent = el.parent().parent(), 
     all = true; 

     el.siblings().each(function() { 
     return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked); }); 


if (all && checked) { 

    parent.children('input[type="checkbox"]').prop({ 
    indeterminate: false, 
    checked: checked }); 


    checkSiblings(parent);} 

else if (all && !checked) { 

    parent.children('input[type="checkbox"]').prop("checked", checked); 
    parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0)); 
    checkSiblings(parent);} 

else { 

    el.parents("li").children('input[type="checkbox"]').prop({ 
    indeterminate: true, 
    checked: false });}} 


checkSiblings(container); 
}); 
</script> 
<body> 
<h1>Indeterminate Checkboxes</h1> 

<ul> 
<li> 
<input type="checkbox" name="tall" id="tall"> 
<label for="tall">Tall Things</label> 

<ul> 
    <li> 
    <input type="checkbox" name="tall-1" id="tall-1"> 
    <label for="tall-1">Buildings</label> 
    </li> 
    <li> 
    <input type="checkbox" name="tall-2" id="tall-2"> 
    <label for="tall-2">Giants</label> 

    <ul> 
     <li> 
     <input type="checkbox" name="tall-2-1" id="tall-2-1"> 
     <label for="tall-2-1">Andre</label> 
     </li> 
     <li> 
     <input type="checkbox" name="tall-2-2" id="tall-2-2"> 
     <label for="tall-2-2">Paul Bunyan</label> 
     </li> 
    </ul> 
    </li> 
    <li> 
    <input type="checkbox" name="tall-3" id="tall-3"> 
    <label for="tall-3">Two sandwiches</label> 
    </li> 
</ul> 
</li> 
<li> 
<input type="checkbox" name="short" id="short"> 
<label for="short">Short Things</label> 

    <ul> 
    <li> 
    <input type="checkbox" name="short-1" id="short-1"> 
    <label for="short-1">Smurfs</label> 
    </li> 
    <li> 
    <input type="checkbox" name="short-2" id="short-2"> 
    <label for="short-2">Mushrooms</label> 
    </li> 
    <li> 
     <input type="checkbox" name="short-3" id="short-3"> 
     <label for="short-3">One Sandwich</label> 
    </li> 
    </ul> 
    </li> 
    </ul> 
</body> 
</html> 
+1

嗨!我檢查了你的代碼,它工作正常:) https://jsfiddle.net/h37paz7L/也嘗試改變你的'

0

工作正常。只需添加Jquery依賴。

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
+0

我應該如何混合 <腳本language =「Javascript」> 和這個依賴關係? – faro