Wie eine Reihe von Kontrollkästchen in einer Tabellenzelle für jede gegebene Zeile

Question

Ich habe eine HTML-Tabelle mit einer Zelle pro Zeile verweisen, die fünf Kontrollkästchen enthält:

<td class="days"> 
    <label><input type="checkbox" name="mon" id="mon" value="1" class="form-control" />M</label> 
    <label><input type="checkbox" name="tue" id="tue" value="2" class="form-control" />Tu</label> 
    <label><input type="checkbox" name="wed" id="wed" value="3" class="form-control" />W</label> 
    <label><input type="checkbox" name="thu" id="thu" value="4" class="form-control" />Th</label> 
    <label><input type="checkbox" name="fri" id="fri" value="5" class="form-control" />F</label> 
</td> 

ich meine javaScript müssen die Werte der einzelnen überprüfen Kontrollkästchen, um mit etwas anderem zu vergleichen. Ich habe die folgende Art und Weise versuchte, den Wert des Kontrollkästchen bekommen Mo, Di, Mi, Do und Fr, aber sie scheinen nicht zu funktionieren:

var table = document.getElementById("leaveTable"); 
var monValue = table.rows[row].cells[5].namedItem("mon").firstChild.value; 

(die Zelle die Kontrollkästchen hat einen Index von 5 enthält)

Ich habe mehrere Zeilen, alle identisch mit dem Zeilenindex, so dass ich den Zeilenindex als Parameter an meine Funktionen übergeben kann und die gleichen Funktionen funktionieren unabhängig von der Zeile.

Ich benutze nur javaScript und nicht JQuery, also bitte antworte nur mit javaScript-Vorschlägen. Dank

Answer 1

Sie können querySelectorAll() auf die Zeile verwenden, um alle Eingabeelemente darin

var idx = 0; 
 
var table = document.getElementById("leaveTable"); 
 
var inputs = table.rows[idx].querySelectorAll('input[type="checkbox"]'); //'input[type="checkbox"]:checked' if you want only checked 
 
for (var i = 0; i < inputs.length; i++) { 
 
    snippet.log(inputs[i].value + ':' + inputs[i].name + ':' + inputs[i].nextSibling.nodeValue) 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<table id="leaveTable"> 
 
    <tr> 
 
    <td class="days"> 
 
     <label> 
 
     <input type="checkbox" name="mon" id="mon" value="1" class="form-control" />M</label> 
 
     <label> 
 
     <input type="checkbox" name="tue" id="tue" value="2" class="form-control" />Tu</label> 
 
     <label> 
 
     <input type="checkbox" name="wed" id="wed" value="3" class="form-control" />W</label> 
 
     <label> 
 
     <input type="checkbox" name="thu" id="thu" value="4" class="form-control" />Th</label> 
 
     <label> 
 
     <input type="checkbox" name="fri" id="fri" value="5" class="form-control" />F</label> 
 
    </td> 
 
    </tr> 
 
</table>