The Checkboxes are used to let a user select one or more options for a limited number of choices. The :checkbox selector selects input elements with type checkbox.
Syntax:
$('#textboxID').val($("#checkboxID").is(':checked'));
In the above syntax, basically the return value of the checked or unchecked checkbox is being assigned to the textbox. Below examples will illustrate the approach:
Example 1: Here the return value of the checkbox is assigned to the textbox with a function click() whenever the checkbox is clicked to check or uncheck, it assigns the respective return value into the textbox. So, if we want to assign a certain user-defined value in the textbox according to check then we can do that with the use of if/else statement.
<!DOCTYPE html> < html >
< head >
< script src =
</ 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 >
|
Output:
Example 2: This example contains more than one checkboxes.
<!DOCTYPE html> <html> <head> <script src=
</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> |
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.