Wie bekomme ich die Kontrollkästchen einer bestimmten ul

Question

Ich erstelle eine dynamische ul und versuche, die markierten Kästchen einer bestimmten ul nur zu bekommen.

$(document).on("click", "input:checkbox[name=filter]:checked", function() { 
 
    var flags = Array(); 
 
    $("input:checkbox[name=filter]:checked").each(function() { 
 
    flags.push($(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul>

alle drei UL identisch sind, in diesem Fall, wie kann ich nur die, die alle Kontrollkästchen eines bestimmten ul erhalten.

Dies gibt mir alle ausgewählten Kontrollkästchen von allen Uls.

Answer 1

Ich denke, Sie wollen nur die ul, die das Element geklickt hat. Versuchen Sie folgendes:

$(document).on("click", "input:checkbox[name=filter]:checked", function(){ 
    var flags = Array(); 
    $("input:checkbox[name=filter]:checked", $(this).parents("ul").first()).each(function(){ 
     flags.push($(this).val()); 
    }); 
    console.log(flags); 
}); 

Die innere each Funktion eine $(this).parents("ul").first() Bereichskennung vor ihm hat. Dadurch werden die Eingaben durch den Container der angeklickten Eingabe gefiltert.

Answer 2

das Sie das closest()ul Element erhalten müssen erreichen, dann find() alle Kontrollkästchen in dieser ul bevor über sie Looping das Array zu bauen. Beachten Sie auch, dass Sie die Schleife vereinfachen können, indem Sie stattdessen map() verwenden. Versuchen Sie folgendes:

$(document).on("click", "input:checkbox[name=filter]:checked", function() { 
 
    var flags = $(this).closest('ul').find("input:checkbox[name=filter]:checked").map(function() { 
 
    return this.value; 
 
    }).get(); 
 

 
    console.log(flags); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul>

Answer 3

Bitte versuchen Sie dies.

var flags; 
$("input[name=filter]").on("click",function(){ 
    var ul = $(this).parent().parent(); 
    flags = ul.find("input:checked").map(function(){return this.value}); 
}) 

Answer 4

Sie können Flags außerhalb der Funktion deklarieren, so dass jeder ausgewählte Checkbox-Wert an das Array gesendet werden kann.

var flags = Array(); 
 
$(document).on("click", "input:checkbox[name=filter]:checked", function() { 
 
    flags.push($(this).val()); 
 
    console.log(flags); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul>

Answer 5

Wenn Sie delegierten Ereignishandler verwenden, können Sie die delegateTarget Eigenschaft des Objekts Ereignis verwenden:

event.delegateTarget

Das Element, wo die currently- Der jQuery Event-Handler wurde angefügt.

Sie können dieses delegateTarget dann verwenden, um Ihre Suche nach Checkboxen einzuschränken, indem Sie find verwenden.

Beispiel:

$("ul.dropdown-list").on("click", "input:checkbox[name=filter]:checked", function(e) { 
 
    //console.log(e.target); /* input:checked */ 
 
    //console.log(e.delegateTarget); /* ul.dropdown-list */ 
 
    var checkedBoxes = $(e.delegateTarget).find("input:checkbox[name=filter]:checked"); 
 
    var selections = checkedBoxes.map((id, inp) => inp.value); 
 
    console.log(selections.get()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul> 
 
<ul class="dropdown-list"> 
 
    <li><input type="checkbox" name="filter" value="form">Form</li> 
 
    <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li> 
 
    <li><input type="checkbox" name="filter" value="priority">Priority</li> 
 
    <li><input type="checkbox" name="filter" value="question">Question</li> 
 
</ul>