lundi 2 octobre 2017

Checking state of checkbox nested inside an a tag, nested inside a li, inside a ul

I'm trying to make a select all for a set of checkboxes in a ul. I have successfully made a toggle but a toggle isn't exactly what I'm looking for.

<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>

This is the starting of the click function that I'm using to manipulate the page based off of the checkboxes

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

From here I'm trying to make an if statement to check whether or not select all (in sample code test1 is selected) and whether or not it's checked so that the code can then check or uncheck all other checkboxes.




Aucun commentaire:

Enregistrer un commentaire