Tengo algunas casillas de verificación en el sitio web. Si el usuario no marca ninguna de las casillas de verificación, quiero mostrar un texto de advertencia en la página (no alerta). Una vez que una de las casillas de verificación esté marcada, esta advertencia desaparecerá. Escribí el siguiente código. Esto me ayuda a mostrar solo en la consola. Sin embargo, quiero obtener ayuda para mostrar en la página misma. ¡Cualquier ayuda es apreciada! PD: Soy bastante nuevo en esto. Lo siento si mi pregunta es tonta.
<script> var array1 = [] const checkboxes=document.querySelectorAll('input[name=group1]:checked') for (let i = 0; i < checkboxes.length; i++) { array1.push(checkboxes[i].value) } if(array1.length == 0){ console.log("Please select at least one option to process further!") } </script>Agrega algo como <div id="warning"></div> en su html.
Y
document.querySelector('#warning').innerText = 'Please select at least one option';en tu javascript. Solo juega con eso.
Asumiendo que tienes algo básicamente como esto en tu HTML
<input type="checkbox" name="group1" value="1"> <input type="checkbox" name="group1" value="2"> <input type="checkbox" name="group1" value="3"> <input type="checkbox" name="group1" value="4"> <input type="checkbox" name="group1" value="5"> <div id="warningDiv">Please select at least one option to process further!</div>En este punto solo necesitas hacer algo como esto:
<script> if(document.querySelectorAll('input[name=group1]:checked').length == 0) { //Here you can do an alert or put the text on another html element like a div //For example alert("Please select at least one option to process further!") } </script>El ": marcado" le dice al selector que solo devuelva los que están seleccionados. Y querySelectorAll devuelve una matriz de nodos, por lo que puede verificar fácilmente su longitud para verificar si se seleccionó alguno.
Puedes seguir el juego si quieres validar un seleccionado, dos seleccionados, más de uno, etc.
Si pinta el mensaje en otro elemento, debe agregar otra cosa para eliminar el mensaje.
<script> if(document.querySelectorAll('input[name=group1]:checked').length == 0) { //Here you can do an alert or put the text on another html element like a div //For example document.getElementById('warningDiv').innerHTML = "Please select at least one option to process further!"; }else{ document.getElementById('warningDiv').innerHTML = ""; } </script>Como se sugirió, puede poner esto en un oyente, más o menos así:
function checkChecked() { if(document.querySelectorAll('input[name=group1]:checked').length == 0) { document.getElementById('warningDiv').innerHTML = "Please select at least one option to process further!"; }else{ document.getElementById('warningDiv').innerHTML = ""; } } checkChecked(); const allcheckboxes = document.querySelectorAll('input[name=group1]'); for(let checkboxinput in allcheckboxes) { if(typeof allcheckboxes[checkboxinput] == "object" && allcheckboxes[checkboxinput] != null) { allcheckboxes[checkboxinput].addEventListener('change', function(e) { checkChecked() }); } } #warning { color: red; } <input type="checkbox" name="group1" value="1"> <input type="checkbox" name="group1" value="2"> <input type="checkbox" name="group1" value="3"> <input type="checkbox" name="group1" value="4"> <input type="checkbox" name="group1" value="5"> <div id="warningDiv">Please select at least one option to process further!</div> // query and get elements const checkboxs = document.querySelectorAll('input[type=checkbox]'); const messages = document.querySelectorAll('.warning'); // add event listener to each element checkboxs.forEach(checkbox => { checkbox.addEventListener("click", () => { toggle(checkboxs, messages); }); }); // show controlled elements const show = (elems) => { elems.forEach(elem => elem.style.display = 'block' ); }; // hide controlled elements const hide = (elems) => { elems.forEach(elem => elem.style.display = 'none' ); }; // toggle controlled element visibility according to checkbox state const toggle = (checkboxs, controlled) => { const emptys = [].filter.call(checkboxs, el => !el.checked); if (emptys.length == checkboxs.length) { show(controlled); } else { hide(controlled); } }; .warning { color: red; } <input type='checkbox' value='1'> <input type='checkbox' value='2'> <input type='checkbox' value='3'> <input type='checkbox' value='4'> <p class='warning'>Please select at least one option to process further!</p>