如何使用 Javascript 获取表格行中的第二个复选框值

Question

我可以使用 console.log 记录复选框的第一个值

console.log(row.querySelector('input[type=checkbox]').value) 如下所示。

我如何 console.log 表格行中复选框的第二个值？ 我仍然希望也能够使用 .theTable tr 作为行。 该值是一个属性，这使我对它更具挑战性。 我将使用此值作为条件的一部分，并选中三个复选标记。

 /*function run() { document.querySelectorAll('.theTable tr').forEach((row, i) => { if (row.querySelector('input[type=checkbox]').checked==false) { console.log(`the first checkbox of row ${i} is checked`); } }) } */ function run() { document.querySelectorAll('.theTable tr').forEach((row, i) => { let allChecked = row.querySelectorAll('input[type=checkbox]').length === row.querySelectorAll('input[type=checkbox]:checked').length if (allChecked && row.querySelectorAll('select option:checked').length > 0 && row.querySelector('select option:checked').value !== '' ) { console.log('run conditional on row index ', i) } if (row.querySelector('input[type=checkbox]').checked) { console.log(`the first checkbox of row ${i} is checked`); console.log(row.querySelector('input[type=checkbox]').value) } if (row.querySelector('input[type=checkbox]').checked==false) { console.log(`the first checkbox of row ${i} is unchecked`); console.log(row.querySelector('input[type=checkbox]').value) } }) }

 <input type="submit" onclick="run()" /> <table class='theTable'> <tr> <form> <td> <label> <input type="checkbox" class="checks" value="Apple" checked>Apple </label> <label> <input type="checkbox" class="checks" value="BananaValue" checked>Banana </label> <label> <input type="checkbox" class="checks" value="Carrot" checked>Carrot </label> </td> <td> Select your favorite fruit: <select id="mySelect"> <option value=""></option> <option value="apple">apple</option> <option value="orange">Orange</option> <option selected value="pineapple">Pineapple</option> <option value="banana">Banana</option> </select> </td> </form> </tr> <tr> <form> <td> <label> <input type="checkbox" class="checks" value="AppleSecond">Apple </label> <label> <input type="checkbox" class="checks" value="BananaValue">Banana </label> <label> <input type="checkbox" class="checks" value="Carrot">Carrot </label> </td> <td> Select your favorite fruit: <select id="mySelect"> <option value=""></option> <option value="apple2">apple2</option> <option value="orange">Orange</option> <option value="pineapple">Pineapple</option> <option value="banana">Banana</option> </select> </td> </form> </tr> </table>

Answer 1

而不是使用row.querySelector尝试使用row.querySelectorAll 。 这将返回特定行中存在的所有复选框。

如果你想要每一行的第二个节点，你可以使用

row.querySelectorAll('input[type=checkbox]')[1]

 function run() { document.querySelectorAll('.theTable tr').forEach((row, index) => { const secondNode = row.querySelectorAll('input[type=checkbox]')[1]; console.log(` second node of row ${index +1}, checked status => ${secondNode.checked}, node value => ${secondNode.value}`); }) }) }

 <input type="submit" onclick="run()" /> <table class='theTable'> <tr> <form> <td> <label> <input type="checkbox" class="checks" value="Apple" checked>Apple </label> <label> <input type="checkbox" class="checks" value="BananaValue" checked>Banana </label> <label> <input type="checkbox" class="checks" value="Carrot" checked>Carrot </label> </td> <td> Select your favorite fruit: <select id="mySelect"> <option value=""></option> <option value="apple">apple</option> <option value="orange">Orange</option> <option selected value="pineapple">Pineapple</option> <option value="banana">Banana</option> </select> </td> </form> </tr> <tr> <form> <td> <label> <input type="checkbox" class="checks" value="AppleSecond">Apple </label> <label> <input type="checkbox" class="checks" value="BananaValue">Banana </label> <label> <input type="checkbox" class="checks" value="Carrot">Carrot </label> </td> <td> Select your favorite fruit: <select id="mySelect"> <option value=""></option> <option value="apple2">apple2</option> <option value="orange">Orange</option> <option value="pineapple">Pineapple</option> <option value="banana">Banana</option> </select> </td> </form> </tr> </table>

Answer 2

 function run() { for(i=0; i < 1; i++){ var x = document.getElementsByTagName('td')[i] var checkboxs= x.getElementsByTagName('input')[1] console.log(checkboxs.value) } }

 <input type="submit" onclick="run()" /> <table class='theTable'> <tr> <form> <td> <label> <input type="checkbox" class="checks" value="Apple" checked>Apple </label> <label> <input type="checkbox" class="checks" value="BananaValue" checked>Banana </label> <label> <input type="checkbox" class="checks" value="Carrot" checked>Carrot </label> </td> <td> Select your favorite fruit: <select id="mySelect"> <option value=""></option> <option value="apple">apple</option> <option value="orange">Orange</option> <option selected value="pineapple">Pineapple</option> <option value="banana">Banana</option> </select> </td> </form> </tr> <tr> <form> <td> <label> <input type="checkbox" class="checks" value="AppleSecond">Apple </label> <label> <input type="checkbox" class="checks" value="BananaValue">Banana </label> <label> <input type="checkbox" class="checks" value="Carrot">Carrot </label> </td> <td> Select your favorite fruit: <select id="mySelect"> <option value=""></option> <option value="apple2">apple2</option> <option value="orange">Orange</option> <option value="pineapple">Pineapple</option> <option value="banana">Banana</option> </select> </td> </form> </tr> </table>

这不完全是你什么，但你可以使用这个逻辑