How to Check a Radio Button and Verify its State in JavaScript

To check a radio button and verify its state using JavaScript, you can follow these steps:

1. Checking a Radio Button#

To programmatically select a radio button, you can set its checked property to true. Here’s a basic example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Radio Button Example</title>
    </head>
    <body>
        <form id="myForm">
            <label>
                <input type="radio" name="myRadioGroup" value="option1" />
                Option 1
            </label>
            <label>
                <input type="radio" name="myRadioGroup" value="option2" />
                Option 2
            </label>
            <label>
                <input type="radio" name="myRadioGroup" value="option3" />
                Option 3
            </label>
            <button type="button" onclick="checkRadioButton()">
                Check Radio Button
            </button>
        </form>

        <script>
            function checkRadioButton() {
                // Get the radio button element
                const radioButton = document.querySelector(
                    'input[name="myRadioGroup"][value="option2"]'
                );

                // Check the radio button
                radioButton.checked = true;
            }
        </script>
    </body>
</html>

In this example, when you click the “Check Radio Button” button, it will programmatically check the radio button with the value "option2".

2. Verifying the State of a Radio Button#

To verify whether a specific radio button is checked, you can check its checked property:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Radio Button Example</title>
    </head>
    <body>
        <form id="myForm">
            <label>
                <input type="radio" name="myRadioGroup" value="option1" />
                Option 1
            </label>
            <label>
                <input type="radio" name="myRadioGroup" value="option2" />
                Option 2
            </label>
            <label>
                <input type="radio" name="myRadioGroup" value="option3" />
                Option 3
            </label>
            <button type="button" onclick="checkRadioButton()">
                Check Radio Button
            </button>
            <button type="button" onclick="verifyRadioButton()">
                Verify Radio Button State
            </button>
        </form>

        <script>
            function checkRadioButton() {
                const radioButton = document.querySelector(
                    'input[name="myRadioGroup"][value="option2"]'
                );
                radioButton.checked = true;
            }

            function verifyRadioButton() {
                const radioButton = document.querySelector(
                    'input[name="myRadioGroup"][value="option2"]'
                );
                if (radioButton.checked) {
                    alert("Option 2 is checked.");
                } else {
                    alert("Option 2 is not checked.");
                }
            }
        </script>
    </body>
</html>

In this example, clicking the “Verify Radio Button State” button will check whether the radio button with the value "option2" is checked and show an alert with the result.

Summary#

To check a radio button, set its checked property to true.
To verify the state of a radio button, check its checked property and use conditional logic to determine its state.

These basic operations allow you to control and check the state of radio buttons using JavaScript.