Mostrar texto cuando la casilla de verificación está marcada en JavaScript
-
Use la propiedad
.checkedde JavaScript para mostrar texto cuando la casilla de verificación esté marcada -
Use la función jQuery
is()y la propiedad JavaScript.checkedpara mostrar texto cuando la casilla de verificación está marcada -
Use eventos jQuery
readyyclickpara mostrar texto cuando la casilla de verificación esté marcada
Este artículo le presenta las diferentes técnicas para mostrar texto cuando la casilla de verificación está marcada en JavaScript. También lo educa sobre funciones y eventos de JavaScript y jQuery.
Use la propiedad .checked de JavaScript para mostrar texto cuando la casilla de verificación esté marcada
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox</title>
</head>
<body>
<p>Let see how to know if check box is checked:</p>
<label for="check">Checkbox:</label>
<input type="checkbox" id="check" onclick="checkfunction()">
<p id="message" style="display:none">Checkbox is Checked Now!</p>
</body>
</html>
Código JavaScript:
function checkfunction() {
var check = document.getElementById('check');
var message = document.getElementById('message');
if (check.checked == true) {
message.style.display = 'block';
} else {
message.style.display = 'none';
}
}
Producción:
El código dado arriba obtiene los elementos apuntando a los valores de su id, check y message. Luego, comprueba si el valor de check.checked es true o false.
Si es true, muestra el mensaje almacenado en la variable message. Sin embargo, .checked es una propiedad booleana que puede ser true o false.
Podemos usar esta propiedad dentro de JavaScript puro y combinarla con la función jQuery. Consulte esto para obtener más detalles.
En lugar de mostrar el mensaje en la ventana para indicar si la casilla de verificación está marcada o no, podemos usar la función alert para mostrar un mensaje emergente en el navegador. Puede reemplazar su código JavaScript con lo siguiente para practicar.
Código JavaScript:
function checkfunction() {
if ((document.getElementById('check')).checked) {
alert('The checkbox is checked');
} else {
alert('The checkbox is not checked')
}
}
Producción:
Use la función jQuery is() y la propiedad JavaScript .checked para mostrar texto cuando la casilla de verificación está marcada
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it and Submit
<button onclick="checked()"> Submit </button>
</body>
</html>
Código JavaScript:
function checked() {
if ($('#check').is(':checked')) {
alert('Checked');
} else {
alert('Not Checked');
}
}
Producción:
El método checked() se ejecuta en el código anterior si hace clic en el botón titulado Submit. Este método obtiene el primer elemento cuyo valor del atributo id es check.
Además, comprueba si la propiedad checked del elemento es true o false. ¿Cómo? Aquí, la función is() comprueba si el elemento seleccionado coincide con el elemento selector.
La función is() compara el elemento actual con el otro elemento; puede ser un selector o un objeto jQuery.
El método is() toma dos parámetros, uno es obligatorio y el otro es opcional (el selectorElement es obligatorio y la function(index, element) es opcional). Esta función devuelve true si la condición cumple false.
Tenga en cuenta que $ actúa como document.getElementById aquí. El código anterior mostrará Checked si la casilla de verificación estará marcada; de lo contrario, No marcado.
Use eventos jQuery ready y click para mostrar texto cuando la casilla de verificación esté marcada
Código HTML:
<html>
<head>
<title>practice ready and click events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it
</body>
</html>
Código JavaScript
$(document).ready(function() {
$('input').click(function() {
alert('You checed....');
});
});
Producción:
Los eventos ready y click son eventos jQuery utilizados en JavaScript.
El evento ready ocurre cuando se carga el modelo de objeto del documento (DOM). Puedes ver más detalles sobre ready aquí.
El clic se utiliza para asignar el evento de clic al elemento seleccionado. En nuestro ejemplo, es una etiqueta input. Puedes leer aquí para más detalles.
Recuerde, puede usar estos eventos solo si desea marcar la casilla de verificación. La razón es que detecta el evento clic en lugar de verificar la propiedad checked.
En el resultado anterior, puede observar que siempre muestra You Checked. No le importa si desmarcas o no, solo detecta si haces clic o no.
Se da cuenta del evento clic, que es útil para saber si la casilla de verificación está marcada solamente. No sería una buena opción si también desea saber si la casilla de verificación está desmarcada o no.
