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

Question

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

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

如何console.log表行中复选框的第二个值？我仍然希望能够使用该行的.Table 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

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>

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

Answer 2

不要使用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>