如何獲取表格中已選中的複選框的位置

Question

我在每一行都有一堆複選框。我如何找到複選框的位置1A或1B時，在第一行檢查兩個或一個複選框。我試圖修改的頁面根據行和列的兩個因素動態生成表格。所以我只需要抓住rowname和colname來進一步編程。例如10（A）如果第一行的名稱是'10'。

<table id="mytable"> 
    <tr> 
     <td> </td> 
     <td align="center"> A </td> 
     <td align="center"> B </td> 
    </tr> 
    <tr> 
     <td> 1 </td> 
     <td><input type="checkbox" /></td> 
     <td><input type="checkbox" /></td> 
    </tr> 
    <tr> 
     <td> 2</td> 
     <td><input type="checkbox" /></td> 
     <td><input type="checkbox" /></td> 
    </tr> 
    </table> 
    <tr> <button id="save">Click</button> </tr> 

Answer 1

這將讓一個檢查input的行和列，連帶列字母和行號通過調用document.querySelector，使用CSS3 first-child和nth-child選擇基於列和行：

document.getElementById('mytable').addEventListener('click', function(e) { 
 
    if(e.target.tagName === 'INPUT') { 
 
    var td= e.target.parentNode, //the input's td parent 
 
     tr= td.parentNode,   //the td's tr parent 
 
     col= td.cellIndex,   //the input's column 
 
     row= tr.rowIndex,   //the input's row 
 
     header= document.querySelector('#mytable tr:first-child td:nth-child('+(col+1)+')').textContent, 
 
     number= document.querySelector('#mytable tr:nth-child('+(row+1)+') td:first-child').textContent; 
 
    
 
    document.getElementById('output').textContent= number+header; 
 
    } 
 
});

<table id="mytable"> 
 
    <tr> 
 
    <td></td> 
 
    <td align="center">A</td> 
 
    <td align="center">B</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<div id="output"></div>

Answer 2

試試這個@普通的JavaScript：

var checkboxes = []; 
for(var i =0; i<document.getElementsByTagName("input").length;i++) { 
if(document.getElementsByTagName("input")[i].checked) {checkboxes.push(i)} 
} 

複選框是一個選中複選框的數組 - 例如， [0,2]，如果第一個和第三個複選框被選中

Answer 3

或像這樣：

https://jsfiddle.net/zLy90w40/1/

function getCheckBox(){ 
    var oneA = document.getElementById('1a'); 
    var oneB = document.getElementById('1b'); 
    var twoA = document.getElementById('2a'); 
    var twoB = document.getElementById('2b'); 
    if (oneA.checked){ 
     alert("1 A was checked") ; 
    } 
    if(oneB.checked){ 
     alert("1 B was checked") ; 
    } 
    if(twoA.checked){ 
     alert("2 A was checked") ; 
    } 
    if(twoB.checked){ 
     alert("2 B was checked") ; 
    } 
    }