JQuery: Setzen Sie den Wert Checkbox

Question

Wenn ich 3 Kontrollkästchen in einer Spalte haben, Onclick jeder Checkbox, ich den Wert der Checkbox in der gesamten Spalte (nicht rudern)

wenn Checkbox in der zweiten Spalte festlegen möchten ist aktiviert/deaktiviert, ich möchte, dass alle anderen Kontrollkästchen in derselben Spalte (2. Spalte) aktiviert/deaktiviert sind.

Dies ist der Code, den ich zu implementieren versuche ::

var a =$j('#table tr').length; 
$j("input[type='checkbox']").change(function() { 
    var ch = this.checked; 
    if checked checkbox is in 2nd column , all the checkboxes in the 2nd column(td) should be checked (row length varies not static) 
}); 

Answer 1

Sie können .index() method verwenden, um herauszufinden, auf welche Spalte geklickt wurde.

Innerhalb des Click-Handlers ist this das angeklickte Kontrollkästchen, sodass $(this).closest("td").index() Ihnen den nullbasierten Index von td innerhalb der Zeile angibt.

Dann können Sie die nth-child() selector (die von eine, nicht 0) zählt, um alle Elemente in dieser Spalte zu erhalten.

Sie nicht Ihre HTML zeigten, so Struktur die folgenden codiert basierend Ich habe auf einem sehr einfachen <table> wie Sie sehen können:

var table = $("table").on("click", ":checkbox", function() { 
 
    var column = $(this).closest("td").index() + 1 
 
    table.find("td:nth-child(" + column + ") :checkbox").prop("checked", this.checked) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
</table>

Answer 2

Wenn ich Sie richtig verstehe, Sie alle 3 der Kontrollkästchen wollen entweder gleichzeitig aktiviert oder deaktiviert werden. Dies sollte für Sie arbeiten.

$(document).on('click', '.class1, .class2, .class3', function(){ 
    var checked = $(this).prop('checked'); 
    if(checked === true) { 
     $('.class1, .class2, .class3').prop('checked', true); 
    } 
    else { 
     $('.class1, .class2, .class3').prop('checked', false); 
    } 
}); 

Denken Sie daran, Sie verwenden sind, was auch immer Klassen der‘.class1, .class2, .class3' zu ändern.

Answer 3

Gemäß der Dokumentation jQuery, Dies kann abhängig von Ihrer Version einige Optimierungen erfordern. https://api.jquery.com/prop/

<div class="column">check one: 
    <input type="checkbox" value="a"> 
    <input type="checkbox" value="b"> 
    <input type="checkbox" value="c"> 
</div> 
<script> 
$("input[type='checkbox']").click(function(){ 
    var checked = $(this).prop("checked"); 
    // console.log(checked,typeof checked); 
    if(checked === true){ 
    $(this).siblings("input[type='checkbox']").prop("checked",true); 
    }else{ 
    $(this).siblings("input[type='checkbox']").prop("checked",false); 
    } 
}); 
</script> 

Ich habe .siblings hier verwendet wird, aber es gibt viele andere Möglichkeiten, es zu tun.

Edit: Mit Eingabe von @ottiem

$("input[type='checkbox']").click(function(){ 
    $(this).siblings("input[type='checkbox']").prop("checked",this.checked); 
}); 

beachten Sie, dass this.checked über die Nutzung des Javascript this, nicht jQuery $(this)