1

¿el input checkbox tiene asignado true o false por defecto o se lo tengo que asignar? si es así, ¿cómo se hace? en javascript. gracias

 <div class="fullday">
    <input type="checkbox" id="check">
 <div>
1
  • ¿Qué quieres decir con "tiene asignado true o false"? ¿si está seleccionado por defecto? ¿cuál es su valor?
    – Orici
    Commented el 9 dic. 2021 a las 17:52

4 respuestas 4

0
<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox esta funcionando!</p>

En el siguiente código se crea la función validar_check. Si se hace click en checkbox entonces muéstrame el texto con el id "text". Sino ocúltalo.

<script>
function validar_check() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>

Aquí puedes añadir tus funciones y lo que necesites con javascript.

0

En un elemento checkbox podés consultar si está "checked" de la siguiente manera ej:

HTML

 <div class="fullday">
    <input type="checkbox" id="check">
 <div>

Script

if (document.getElementById('check').checked)
{
// Hacer algo si está seleccionado. Ej:
alert("fue seleccionado")
}

Esto lo puedes lanzar por ejemplo llamando a una función con un evento onchange del checkbox.

ej:

const checkbox = document.getElementById('check');

checkbox.addEventListener("change", validarCheckbox, false);

function validarCheckbox()
{
  if(checkbox.checked){
    alert('checkbox esta seleccionado');
  } else {
    alert('checkbox NO esta seleccionado');
}
}

O puedes sencillamente desde el html usar por ejemplo:

 <div class="fullday">
    <input type="checkbox" id="check" onchange="validarCheckbox()">
 <div>

Y en JS podrías usar algo así:

function validarCheckbox()
const checkbox = document.getElementById('check');
{
  if(checkbox.checked){
    alert('checkbox esta seleccionado');
  } else {
    alert('checkbox NO esta seleccionado');
}
}
0

El elemento checkbox es por defecto false, mientras no aclaremos otra cosa en el HTML. La propiedad que hay que analizar es checked. Si no está presente es false, si está presente es true. Hay una tercera posibilidad: indeterminate que al momento no lo implementa ningún navegador.

check = document.getElementById("check");


check.addEventListener("click", function() {

  console.log("estado al hacer check o uncheck", this.checked);

})


console.log("estado inicial:", check.checked);// <-- false por defecto
<input type="checkbox" id="check">

Si queremos que por defecto sea true hay que agregar checked en el HTML:

check = document.getElementById("check");


check.addEventListener("click",function(){

console.log("estado al hacer check o uncheck",this.checked);

})


console.log("estado inicial:",check.checked);// <-- ahora es true por defecto
<input type="checkbox" id="check" checked>

El .value en este caso es simplemente el valor que se enviará cuando se envíe un formulario, si es que .checked es true.

-1

El input de tipo checkbox no tiene un valor booleano asignado por defecto, si te puede interesar recuperar su estado para trabajar con él (si fue o no seleccionado).

Se puede comprobar con JavaScript un checkbox:

<div class="fullday">
    <input type="checkbox" id="check">
<div>
<script>
    window.onload = () => {

        function qs(strSelector) // js node
        {
            return document.querySelector(strSelector);
        }

        const input = qs('#check');
        console.log(input, input.value, input.checked, 777);
    };
</script>

Obtendríamos:

<input type="checkbox" id="check"> 'on' false 777

En Chrome no estaría seleccionado por defecto, ni tiene un valor diferente de 'on'*. Como valor se le puede asociar algún dato, si se usa como parte de un formulario solo los checkboxes seleccionados se envían.

En JS puedes saber si un checkbox esta o no seleccionado o cambiar su estado con checked, por ejemplo si amplio el ejemplo, un botón cambia el estado:

<div class="fullday">
        <input type="checkbox" id="check">
    <div>
    <button type="button">Seleccionar / deseccionar</button>

    <script>
        window.onload = () => {

            function qs(strSelector) // js node
            {
                return document.querySelector(strSelector);
            }

            const input = qs('#check');
            console.log(input, input.value, input.checked, 777);

            qs('button').addEventListener('click', function()
            {
                input.checked = !input.checked;
            });
        };
    </script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.