How to change the checkbox value using jQuery ? - GeeksforGeeks

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.
adnanirshad158
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
jQuery | change() with Examples
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?