HTML文件不起作用

Question

我有兩個版本的相同代碼。 當我將它添加到此頁面的代碼片段中時，它工作得很好。但是，由於某種原因，我無法在計算機上運行它。

看看我的Dropbox version想一些想法。這是兩種情況下我使用的相同編碼。它應該檢查父複選框，如果孩子複選框被選中，反之亦然。

你們有什麼想法爲什麼會發生？

$('input[type=checkbox]').click(function() { 
 
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked')); 
 
    var sibs = false; 
 
    $(this).closest('ul').children('li').each(function() { 
 
     if($('input[type=checkbox]', this).is(':checked')) sibs=true; 
 
    }) 
 
    $(this).parents('ul').prev().prop('checked', sibs); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="tree" id="tree"> 
 
    <li> 
 
     <input type="checkbox" name="account_settings" value="yes">Account Settings 
 
     <!-- AND SHOULD CHECK HERE --> 
 
     <ul> 
 
      <li> 
 
       <input type="checkbox" name="one" value="one">AS One</li> 
 
      <li> 
 
       <input type="checkbox" name="two" value="two">AS Two</li> 
 
      <li> 
 
       <input type="checkbox" name="user_roles" value="user_roles">Users &amp; Roles 
 
       <!-- SHOULD CHECK HERE --> 
 
       <ul> 
 
        <li> 
 
         <input type="checkbox" name="user_role" value="add">Add</li> 
 
        <li> 
 
         <input type="checkbox" name="user_role" value="delete">Delete</li> 
 
        <!-- CHECK HERE --> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" name="rl_module" value="yes">RL Module</li> 
 
    <li> 
 
     <input type="checkbox" name="rl_module" value="yes">Accounting 
 
     <ul> 
 
      <li> 
 
       <input type="checkbox" name="vat" value="yes">VAT</li> 
 
      <li> 
 
       <input type="checkbox" name="bank_account" value="yes">Banking 
 
       <ul> 
 
        <li> 
 
         <input type="checkbox" name="view" value="yes">View</li> 
 
        <li> 
 
         <input type="checkbox" name="crud" value="yes">CRUD</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 1

你有沒有試過把腳本放在身體後面？ （你可以把腳本標籤放在頭部加載jQuery的位置）
我使用了你的代碼，並把你的腳本放在body之後，它工作得很好。
我曾遇到過這個問題，以及腳本放在身體之前不會工作的情況。
讓我知道它是否適合你。

Answer 2

之所以上面的代碼不工作是「事件沒有得到連接」的元素。嘗試在頁面中打開調試器工具，並在Dropbox中打開一個調試器工具，您會發現沒有事件附加到Dropbox的元素。

您可以使用on附加事件來克服這種情況。

$('input[type=checkbox]').on('click',function() { 
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked')); 
var sibs = false; 
$(this).closest('ul').children('li').each(function() { 
    if($('input[type=checkbox]', this).is(':checked')) sibs=true; 
}) 
$(this).parents('ul').prev().prop('checked', sibs); 
});