Menu Close

How to append the Checkbox Value to another input Using jQuery?

Codeamend

Here we are using the jQuery click() function to assign the value to the textbox with the action of checkbox. Whenever the checkbox is clicked to check or uncheck, it assigns the respective return value into the textbox.

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
    <script>
        $(document).ready(function() {
              
            $('#textbox2').val('Not Selected');
          
            $('#checkbox2').click(function() {
                if ($('#checkbox2').is(":checked") == true) {
                    var value1 = $(this).val();
                    $('#textbox2').val(value1);
                    $('#checkbox3').prop('checked', false);
                } else {
                    $('#textbox2').val('Not Selected');
                }
            });
          
            $('#checkbox3').change(function() {
                if ($('#checkbox3').is(":checked") == true) {
                    var value2 = $(this).val();
                    $('#textbox2').val(value2);
                    $('#checkbox2').prop('checked', false);
                } else {
                    $('#textbox2').val('Not Selected');
                }
            });
        });
    </script>
</head>
  
<body>
          
        <input type="checkbox" id="checkbox2" value="Male" /> Male
        <input type="checkbox" id="checkbox3" value="Female" /> Female
        <br>
          
        <input type="text" id="textbox2" />
</body>
  
</html> 

Share

Posted in HTML, jQuery

You can also read...