How to change the checkbox value using jQuery ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: This example conatains more than one checkboxes.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.