¿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>
¿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>
<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.
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');
}
}
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
.
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>