How Can I Check Whether A Radio Button Is Selected With Javascript

In JavaScript, checking whether a radio button is selected can be a handy task when you're working on forms or interactive elements on a web page. Radio buttons allow users to select one option from a list, and knowing how to determine which option has been chosen can help you tailor your webpage's behavior accordingly.

To check whether a radio button is selected with JavaScript, you'll need to target the radio button element and then check its `checked` property. This property will return `true` if the radio button is selected, and `false` if it is not.

Here's a simple script that demonstrates how to check the status of a radio button:

<!-- HTML -->

<label for="option1">Option 1</label>


<label for="option2">Option 2</label>

<button>Check Radio Button</button>


function checkRadioButton() {
    const option1 = document.getElementById('option1');
    const option2 = document.getElementById('option2');

    if (option1.checked) {
        console.log('Option 1 is selected');
    } else if (option2.checked) {
        console.log('Option 2 is selected');
    } else {
        console.log('No option is selected');
    }
}

In this code snippet, we first define two radio buttons with unique IDs. We then have a button that calls the `checkRadioButton` function when clicked. Inside the function, we retrieve the radio button elements using `getElementById`, and then we check their `checked` property to determine if they are selected or not. Depending on the result, we log a message to the console indicating which option is selected, or if none are selected.

Remember, radio buttons in a group share the same `name` attribute, and only one option can be selected at a time within a group. By targeting specific radio buttons by their IDs or using other methods to access them, you can easily determine their selection status. This can be particularly useful when building dynamic forms or interactive features on your website.

By understanding how to check the status of radio buttons in JavaScript, you can create more user-friendly and responsive interfaces that react intelligently to user input. Feel free to customize and expand upon this example to suit your specific project needs.