Tengo problemas para crear un botón que pueda detectar qué casilla de verificación en la fila está marcada y guardar datos para la fila marcada.
Por ejemplo, si marqué la casilla de verificación para las filas 1 y 3 en el proyecto a continuación y presioné el botón Guardar todo, entonces la entrada 1 y 3 debería aparecer como un número dentro.
function save() { document.getElementById(1).value = 1; } function save2() { document.getElementById(2).value = 2; } function save3() { document.getElementById(3).value = 3; } function saveall() { //save the input wherever the checkbox is checked } <table class="table" border="1"> <thead> <tr> <th>Input</th> <th><input id="1"></th> <th><input type="checkbox"></th> <th><button type="submit" onclick="save()">save</button></th> </tr> <tr> <th>Input</th> <th><input id="2"></th> <th><input type="checkbox"></th> <th><button onclick="save2()">save</button></th> </tr> <tr> <th>Input</th> <th><input id="3"></th> <th><input type="checkbox"></th> <th><button onclick="save3()">save</button></th> </tr> <button onclick="saveall()">save all</button> </thead> </table>Puede usar una id para cada casilla de verificación como lo hizo para cada barra de entrada normal
function save(n) { document.getElementById(n).value = n; } let checkbox1=document.getElementById('ch1') let checkbox2=document.getElementById('ch2') let checkbox3=document.getElementById('ch3') function saveall() { if(checkbox1.checked){document.getElementById(1).value=1} if(checkbox2.checked){document.getElementById(2).value=2} if(checkbox3.checked){document.getElementById(3).value=3} } <table class="table" border="1"> <thead> <tr> <th>Input</th> <th><input id="1"></th> <th><input id="ch1" type="checkbox"></th> <th><button type="submit" onclick="save(1)">save</button></th> </tr> <tr> <th>Input</th> <th><input id="2"></th> <th><input id="ch2" type="checkbox"></th> <th><button onclick="save(2)">save</button></th> </tr> <tr> <th>Input</th> <th><input id="3"></th> <th><input id="ch3" type="checkbox"></th> <th><button onclick="save(3)">save</button></th> </tr> <button onclick="saveall()">save all</button> </thead> </table>Puedes hacer así también.
function save(n) { let el = document.getElementById(n); if(document.getElementById(`ch${n}`).checked) el.value = n; else el.value = ""; } function saveall() { document.querySelectorAll(".table input[type='checkbox'][id^='ch']").forEach(function(el){ let id = el.attributes.id.value; let input_id = id.substring(2, id.length); if(el.checked) document.getElementById(input_id).value = input_id; else document.getElementById(input_id).value = ""; }) } <table class="table" border="1"> <thead> <tr> <th>Input</th> <th><input id="1"></th> <th><input id="ch1" type="checkbox"></th> <th><button type="submit" onclick="save(1)">save</button></th> </tr> <tr> <th>Input</th> <th><input id="2"></th> <th><input id="ch2" type="checkbox"></th> <th><button onclick="save(2)">save</button></th> </tr> <tr> <th>Input</th> <th><input id="3"></th> <th><input id="ch3" type="checkbox"></th> <th><button onclick="save(3)">save</button></th> </tr> <button onclick="saveall()">save all</button> </thead> </table>Acabo de implementar la función saveall() por:
Como se sugiere en otros comentarios, debe mejorar su código:
thead , pero este es el cuerpo de la tabla;table (como el button de guardarTodo);save() , save1() , etc., pueden ser save(inputNumber) ; function save() { document.getElementById(1).value = 1; } function save2() { document.getElementById(2).value = 2; } function save3() { document.getElementById(3).value = 3; } function saveall() { //save the input wherever the checkbox is checked let nodeList = document.querySelectorAll('input:checked'); nodeList.forEach(node => node.parentNode.parentNode.querySelectorAll('button')[0].click()); } <table class="table" border="1"> <thead> <tr> <th>Input</th> <th><input id="1"></th> <th><input type="checkbox"></th> <th><button type="submit" onclick="save()">save</button></th> </tr> <tr> <th>Input</th> <th><input id="2"></th> <th><input type="checkbox"></th> <th><button onclick="save2()">save</button></th> </tr> <tr> <th>Input</th> <th><input id="3"></th> <th><input type="checkbox"></th> <th><button onclick="save3()">save</button></th> </tr> <button onclick="saveall()">save all</button> </thead> </table>