如何获取表格中已选中的复选框的位置

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") ; 
    } 
    }