HTML-файл не работает

Question

У меня есть две версии того же кода. Когда я добавил его в фрагмент кода с этой страницы, он работает очень хорошо. Однако по какой-то причине я не могу заставить его работать, работая на моем компьютере.

Посмотрите на мой Dropbox version, чтобы получить представление. Это то же кодирование, которое я использую в обоих случаях. Он должен проверить флажок parent, если установлен флажок child и наоборот.

У вас есть идея, почему это происходит?

$('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 в голову)
Я использовал ваш код и просто поместил ваш скрипт после тела, и он работал отлично.
У меня был этот вопрос, где скрипт не работал бы, когда он был помещен перед телом.
Сообщите мне, если это сработает для вас.

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