NRSolution4u Dot net Learning : Java script radio button event programming

Sunday, June 28, 2026

Java script radio button event programming

JavaScript Radio Button Example with Result

This example allows the user to select a gender using radio buttons and displays the selected value when the button is clicked.

HTML + JavaScript Code


<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Radio Button Example</title>

    <script>
        function showResult() {

            var gender = "";

            if (document.getElementById("male").checked) {
                gender = "Male";
            }
            else if (document.getElementById("female").checked) {
                gender = "Female";
            }
            else if (document.getElementById("other").checked) {
                gender = "Other";
            }
            else {
                gender = "Please select a gender.";
            }

            document.getElementById("result").innerHTML = gender;
        }
    </script>

</head>

<body>

    <h2>JavaScript Radio Button Example</h2>

    <input type="radio" id="male" name="gender"> Male <br><br>

    <input type="radio" id="female" name="gender"> Female <br><br>

    <input type="radio" id="other" name="gender"> Other <br><br>

    <button onclick="showResult()">Show Result</button>

    <h3>Selected Gender:</h3>
    <p id="result"></p>

</body>
</html>

Output

Before Clicking Button


( ) Male
( ) Female
( ) Other

[ Show Result ]

Example 1

If the user selects Male:


Selected Gender:
Male

Example 2

If the user selects Female:


Selected Gender:
Female

Example 3

If no option is selected:


Selected Gender:
Please select a gender.

Learning Points

input type="radio" creates a radio button.
Radio buttons with the same name belong to the same group.
.checked returns true if a radio button is selected.
document.getElementById() accesses an HTML element by its ID.
.innerHTML displays the selected value in the page.

This is a simple and beginner-friendly JavaScript radio button example suitable for students learning HTML and JavaScript.

NRSolution4u Dot net Learning