Tengo un formulario con 3 casillas de verificación. Estoy tratando de calcular el valor de cualquier casilla de verificación en la que se haga clic. Puedo obtener el valor de un índice de casilla de verificación codificado (casilla de verificación [0] por ejemplo), pero no puedo obtener el valor de la casilla de verificación [i] con Vanilla JS.
document.addEventListener("DOMContentLoaded", function() { var checkboxes = document.getElementsByClassName('checkbox'); var listType = document.getElementById('ListType'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('click', function() { var inputByIndex = checkboxes[0].value; //I can get the value of the first element, but I can't get the value of whichever checkbox is checked. checkbox[i] doesn't work. listType.classList.add(inputByIndex); var spanType = document.getElementById("type"); spanType.innerText = inputByIndex; }); } }); input { margin: 20px; } #ListType.basiclist { color: red; } #ListType.accordionlist { color: blue; } #ListType.internalonly { color: pink; } <form id="ListTypes"> <label for "basicList"><input type="checkbox" id="basicList" class="checkbox" name="basicList" value="basiclist"/>Basic List</label> <label for "accordionList"><input type="checkbox" id="accordionList" class="checkbox" name="accordionList" value="accordionlist"/>Accordion List</label> <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="internalOnly" value="internalonly" />Internal Use Only</label> </form> <div id="ListType"> List Type: <span id="type"></span> </div>Puede usar event.currentTarget para acceder al elemento en el que se produjo el evento.
La propiedad de solo lectura currentTarget de la interfaz Event identifica el destino actual del evento, ya que el evento atraviesa el DOM.
document.addEventListener("DOMContentLoaded", function() { var checkboxes = document.getElementsByClassName('checkbox'); var listType = document.getElementById('ListType'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('click', function(event) { var inputByIndex = event.currentTarget.value; listType.classList.add(inputByIndex); var spanType = document.getElementById("type"); spanType.innerText = inputByIndex; }); } }); input { margin: 20px; } #ListType.basiclist { color: red; } #ListType.accordionlist { color: blue; } #ListType.internalonly { color: pink; } <form id="ListTypes"> <label for "basicList"><input type="checkbox" id="basicList" class="checkbox" name="basicList" value="basiclist"/>Basic List</label> <label for "accordionList"><input type="checkbox" id="accordionList" class="checkbox" name="accordionList" value="accordionlist"/>Accordion List</label> <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="internalOnly" value="internalonly" />Internal Use Only</label> </form> <div id="ListType"> List Type: <span id="type"></span> </div>Delegar
Debe pensar en el CSS para más de un color de lista Escriba o use un conjunto de botones de opción
document.addEventListener("DOMContentLoaded", function() { document.getElementById('ListTypes').addEventListener("click", function(e) { const tgt = e.target; if (tgt.type && tgt.type === 'checkbox') { const values = [...tgt.form.querySelectorAll("[type=checkbox]:checked")].map(chk => chk.value); document.getElementById("type").textContent = values.join(", ") document.getElementById("ListType").classList.add(...values); } }); }); input { margin: 20px; } #ListType.basiclist { color: red; } #ListType.accordionlist { color: blue; } #ListType.internalonly { color: pink; } <form id="ListTypes"> <label for "basicList"><input type="checkbox" id="basicList" class="checkbox" name="basicList" value="basiclist"/>Basic List</label> <label for "accordionList"><input type="checkbox" id="accordionList" class="checkbox" name="accordionList" value="accordionlist"/>Accordion List</label> <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="internalOnly" value="internalonly" />Internal Use Only</label> </form> <div id="ListType"> List Type: <span id="type"></span> </div>