Este es mi HTML
<div class="compareTrigger"> <input id="firstInput" class="btn-compare-trigger" type="checkbox" <label for="firstInput" class="compare-label">compare</label> </div> <div class="compare-wrapper"> <div class="compare-elements-wrapper"> <div class="compare-element-item"> <button class="btn-remove-item">Remove item</button> </div> </div> </div> Cuando hago clic en la casilla de verificación de entrada, su estado se checked y activa un evento que crea elementos que están en el contenedor de elementos de comparación.
Cuando hago clic en .btn-remove-item , se eliminará compare-element-item y quiero que mi casilla de verificación firstInput esté desmarcada e imite un evento que la desmarca. ¿Cómo imito hacer clic en la casilla de verificación cuando compare-element-item ?
Puede establecer el atributo checked del elemento de la casilla de verificación en false si desea desmarcarlo:
// Get the remove button element const removeButton = document.getElementById("removeButton"); removeButton.addEventListener("click", function() { const firstInputCheckBox = document.getElementById("firstInput"); // Uncheck the input firstInputCheckBox.checked = false; }); <input type="checkbox" id="firstInput"> <label for="firstInput" class="compare-label">compare</label><br /> <button type="button" id="removeButton">Remove item</button><br /> Alternativamente, puede usar yourElement.checked = !yourElement.checked para cambiarlo de marcado a no marcado o al contrario, dependiendo de su estado:
const toggleButton = document.getElementById("toggleButton"); toggleButton.addEventListener("click", function() { const firstInputCheckBox = document.getElementById("firstInput"); // Toggle the input firstInputCheckBox.checked = !firstInputCheckBox.checked; }); <input type="checkbox" id="firstInput"> <label for="firstInput" class="compare-label">compare</label><br /> <button type="button" id="toggleButton">Toggle checkbox</button> Si desea activar el evento, click en la casilla de verificación, primero puede crear un new Event('click') y luego, dispatchEvent()
const firstInputCheckBox = document.getElementById("firstInput"); firstInputCheckBox.addEventListener("click", function() { console.log(`the checkbox was clicked and it's now ${firstInputCheckBox.checked ? '' : 'un'}checked`) }); // Get the remove button element const removeButton = document.getElementById("removeButton"); removeButton.addEventListener("click", function() { // Uncheck the input firstInputCheckBox.checked = false; const clickEvent = new Event('click'); firstInputCheckBox.dispatchEvent(clickEvent); }); <input type="checkbox" id="firstInput"> <label for="firstInput" class="compare-label">compare</label><br /> <button type="button" id="removeButton">Remove item</button><br />Con función de click()
document.getElementsByClassName("btn-remove-item").onclick = function () { document.getElementById("firstInput").click(); };Respuesta antigua marcada como falsa
document.getElementsByClassName("btn-remove-item").onclick = function () { document.getElementById("firstInput").checked = false; };