Как установить позицию отмеченного флажка в таблице

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

checkboxes - это набор проверочных флажков - например. [0,2], если первый и 3-й флажков проверяются

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