Tengo estos botones y quiero hacer clic en los seleccionados a la vez
<div class="form-group"> <input type="checkbox"> <label><button onclick="alert('a')">button1</button></label> </div> <div class="form-group"> <input type="checkbox"> <label><button onclick="alert('b')">button2</button></label> </div> <div class="form-group"> <input type="checkbox"> <label><button onclick="alert('c')">button3</button></label> </div> <button>go</button>Probé algunas cosas de jquery pero no lo logré.
En lugar de simplemente darte un código :
class a sus casillas de verificación también. Me gusta: class="chk"on* . JS debe estar en un solo lugar, y esa es su etiqueta o archivo respectivo. Use addEventListener en su lugar<button> dentro de <label> ya que robará el foco.value . Utilice ese atributo para almacenar el valor deseado.for atributos. Agregue id a sus ENTRADAS y for a sus etiquetas, o simplemente envuelva todo dentro de LABELtype="button" en tus botonesprompt , alert . Reemplácelos con una interfaz de usuario adecuada. Para fines de prueba, use console // DOM utility functions: const EL = (sel, par) => (par || document).querySelector(sel); const ELS = (sel, par) => (par || document).querySelectorAll(sel); // Task: const doSomething = (EL_chk) => { // Do something... console.log(EL_chk.value); }; // Add change events to each checkbox ELS(".chk").forEach((EL_chk) => { EL_chk.addEventListener("input", () => doSomething(EL_chk)); }); // On button GO click, target the checked ones EL("#go").addEventListener("click", () => { ELS(".chk:checked").forEach(doSomething); }); .btn { display: inline-block; background: #eee; padding: 0.3rem 0.5rem; border-radius: 0.2rem; border: 0; } <div class="form-group"> <label> <input class="chk" type="checkbox" value="a"> <!-- DON'T USE <button> INSIDE A LABEL --> <span class="btn">button A</span> </label> </div> <div class="form-group"> <label> <input class="chk" type="checkbox" value="b"> <span class="btn" data-click="a">button B</span> </label> </div> <div class="form-group"> <label> <input class="chk" type="checkbox" value="c"> <span class="btn">button C</span> </label> </div> <button id="go" class="btn" type="button">GO</button>Prueba esto. En JS, somos un botón seleccionado con el estado de la casilla de verificación marcado y luego activamos el evento de clic.
function go() { document.querySelectorAll('input[type="checkbox"]:checked ~ label > button').forEach(function(element){ element.click(); }) } <div class="form-group"> <input type="checkbox" > <label ><button onclick="alert('a')">button1</button></label> </div> <div class="form-group"> <input type="checkbox" > <label ><button onclick="alert('b')">button2</button></label> </div> <div class="form-group"> <input type="checkbox" > <label ><button onclick="alert('c')">button3</button></label> </div> <br> <button onclick="go()">go</button>