親にチェックするだけで、子や孫のチェックボックスもまとめてチェック出来る

Ads

Result

jQuery

//チェンジイベント
$("ul input:checkbox").change(function(){
    if ($(this).is(':checked')) {
        $(this).parent().find("input:checkbox").attr('checked', 'checked');
    }
    else {
 
        $(this).parent().find("input:checkbox").removeAttr('checked');
        $(this).parents('li').each(function(){
            $(this).children('input:checkbox').removeAttr('checked');
        });
    }
});

html

<ul>
<li><input type="checkbox" id="input1"><label for="input1">check 1</label>
    <ul>
    <li><input type="checkbox" id="input11"><label for="input11">check 11</label></li>
    <li><input type="checkbox" id="input12"><label for="input12">check 12</label></li>
    <li><input type="checkbox" id="input13"><label for="input13">check 13</label></li>
    </ul>
</li>
<li><input type="checkbox" id="input2"><label for="input2">check 2</label></li>
<li><input type="checkbox" id="input3"><label for="input3">check 3</label>
<ul>
    <li><input type="checkbox" id="input31"><label for="input31">check 31</label></li>
    <li><input type="checkbox" id="input32"><label for="input32">check 32</label></li>
    <li><input type="checkbox" id="input33"><label for="input33">check 33</label>
            <ul>
            <li><input type="checkbox" id="input331"><label for="input331">check 331</label></li>
            <li><input type="checkbox" id="input332"><label for="input332">check 332</label></li>
            <li><input type="checkbox" id="input333"><label for="input333">check 333</label></li>
            </ul>
    </li>
</ul>
</li>
</ul>

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7