Radio Buttons to display values

Viewed 43

How to display a value when a particular radio button is selected? For suppose if we have two radio buttons namely - male & female. When radio button "male" is selected there should be a text displayed saying "Hi, I'm male". and similarly for the other radio button.

1 Answers

You can use click function.

<!DOCTYPE html>
<html>

<body>

 <input type="radio" name="gender" value="male"><label for="male">Male</label><br>
 <input type="radio" name="gender" value="female"><label for="female">Female</label><br>

 <p>Hi, I'm <span id="sex"></span></p>


 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
     $("input[name=gender]").click(function () {
         $("#sex").text($(this).val());
     });

 </script>
</body>

</html>
Related