Vérification de l'état de la case à cocher imbriqué dans un tag, imbriqué dans un li, à l'intérieur d'un ul

Question

J'essaie de faire un select tout pour un ensemble de cases à cocher dans un ul. J'ai réussi à faire une bascule mais une bascule n'est pas exactement ce que je cherche.

<ul class="dropdown-menu" id="filter"> 
    <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" />Test 1</a></li> 
    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" />Test 2</a></li> 
    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" />Test 3</a></li> 
</ul> 

C'est le démarrage de la fonction de clic que j'utilise pour manipuler la page basée hors des cases

$('#filter >li>a').on('click', function(event) { 
    event.preventDefault(); 
    var $target = $(event.currentTarget), 
    val = $target.attr('data-value'), 
    $inp = $target.find('input'), 
    idx; 

De là, je suis en train de faire une instruction if pour vérifier si ou ne pas sélectionner tout (dans l'exemple de code test1) est sélectionné et s'il est coché ou non pour que le code puisse ensuite cocher ou décocher toutes les autres cases.

Answer 1

Vérifiez la valeur pour l'entrée pour voir si c'est la première option. Si c'est le cas, sélectionnez toutes les entrées dans le menu déroulant et faites-les cocher.

$(document).ready(function() { 
 
    $('#filter >li>a').on('click', 
 
    function(event) { 
 
     event.preventDefault(); 
 

 
     var $target = $(event.currentTarget), 
 
     val = $target.attr('data-value'), 
 
     $inp = $target.find('input'), 
 
     idx; 
 
\t \t \t 
 
     var isChecked = !$inp.prop('checked'); 
 
     if(val == 'option1') { 
 
     \t $('.dropdown-menu input').prop('checked', isChecked); 
 
     } else { 
 
     $inp.prop('checked', isChecked); 
 
     } 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-menu" id="filter"> 
 
    <li> 
 
    <a href="#" class="small" data-value="option1" tabIndex="-1"> 
 
     <input type="checkbox">Test 1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="small" data-value="option2" tabIndex="-1"> 
 
     <input type="checkbox">Test 2</a> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="small" data-value="option3" tabIndex="-1"> 
 
     <input type="checkbox">Test 3</a> 
 
    </li> 
 
</ul>

Answer 2

<ul class="dropdown-menu" id="filter"> 
    <li><a onclick="for(i=1;i<document. 
querySelectorAll('#filter a input').length;i++){document. 
querySelectorAll('#filter a input')[i].checked=document. 
querySelectorAll('#filter a input')[0].checked;}" href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" id="test1" /><label for="test1">Test 1</label></a></li> 
    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" id="test2" /><label for="test2">Test 2</label></a></li> 
    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" id="test3" /><label for="test3">Test 3</label></a></li> 
</ul> 

De ceci: https://stackoverflow.com/a/18537624/6917520

Fiddle: https://jsfiddle.net/ayunami2000/z5x4pxk2/3/