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

Question

我有一張桌子，每一行都有一堆復選框。 當第一行中的兩個或兩個復選框都選中時，如何找到復選框的位置，例如1A或1B。 我嘗試修改的頁面基於行和列的兩個因素動態地制作了表格。 因此，我只需要獲取行名和列名即可進行進一步編程。 例如，如果第一行的名稱為“ 10”，則為10（A）。

<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選擇器和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") ;
    }
    }