How to change the checkbox value using jQuery ?

Last Updated : 03 Aug, 2021

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.

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>

Output:

Example 2: This example contains more than one checkboxes.

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>

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.

How to make a Themed Checkbox using jQuery Mobile ?

Tejashwi5

Improve

Article Tags :

How to change the checkbox value using jQuery ?

Similar Reads