Las casillas de verificación se utilizan para permitir que un usuario seleccione una o más opciones para un número limitado de opciones. El selector :checkbox selecciona elementos de entrada con casilla de verificación de tipo.
Sintaxis:
$('#textboxID').val($("#checkboxID").is(':checked'));
En la sintaxis anterior, básicamente el valor de retorno de la casilla de verificación marcada o no marcada se asigna al cuadro de texto. Los siguientes ejemplos ilustrarán el enfoque:
Ejemplo 1: aquí el valor de retorno de la casilla de verificación se asigna al cuadro de texto con una función click() cada vez que se hace clic en la casilla de verificación para marcar o desmarcar, asigna el valor de retorno respectivo en el cuadro de texto. Por lo tanto, si queremos asignar un determinado valor definido por el usuario en el cuadro de texto de acuerdo con la verificación, podemos hacerlo con el uso de la instrucción if/else .
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
// Set initial state
$('#textbox2').val($(this).is(':checked'));
// It gets checked to false as uncheck
// is the default
$('#checkbox1').click(function() {
$('#textbox2').val($(this).is(':checked'));
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A Computer Science
Portal for Geeks
</p>
<input type="checkbox" id="checkbox1" />
Check if true, Uncheck if false.
<br><br>
<input type="text" id="textbox2" />
</center>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo contiene más de una casilla de verificación.
javascript
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
// Set initial state
$('#textbox1').val('no');
// Returns yes or no in textbox1
// when checked and unchecked
$('#checkbox1').click(function() {
if ($("#checkbox1").is(":checked") == true) {
$('#textbox1').val('yes');
} else {
$('#textbox1').val('no');
}
});
// Returns male in textbox2 if checkbox2 checked.
$('#checkbox2').click(function() {
if ($('#checkbox2').is(":checked") == true) {
$('#textbox2').val('Male');
} else {
$('#textbox2').val('');
}
});
// Returns female in textbox2
// if checkbox2 checked.
$('#checkbox3').change(function() {
if ($('#checkbox3').is(":checked") == true) {
$('#textbox2').val('Female');
} else {
$('#textbox2').val('');
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<p>
A Computer Science
Portal for Geeks
</p>
<input type="checkbox" id="checkbox1" />
Check If yes!
<br>
<input type="text" id="textbox1" />
<br>
<input type="checkbox" id="checkbox2" /> Male
<input type="checkbox" id="checkbox3" /> Female
<br>
<input type="text" id="textbox2" />
</center>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .