How to Test for a Checked Radio Button in JavaScript

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Test for a Checked Radio Button in JavaScript
Radio buttons enable users to make choices via mouse clicks. (Hand on Mouse - Using the Computer image by evillager from Fotolia.com)

When your website needs a visitor to make a choice, you can add check-boxes or radio buttons to your web pages. Check-boxes are useful when you do not care how many items a user chooses. Radio buttons are good for limiting a user's choice to a single value. For example, if your site offers multiple shipping methods, you do not want customers to select two mutually exclusive methods. Using JavaScript, you can test for checked radio buttons and determine a user's selected value.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Launch Notepad or your HTML editor.

  2. 2

    Open one of your HTML web pages and add this code:

    <input type="radio" name="temperature" value="Hot" />Hot

    <input type="radio" name="temperature" value="Cold" />Cold

    <input id="Button1" type="button" value="Click to check radio buttons" onclick="checkRadioButtons()" />

    This creates two radio buttons with IDs of "Radio1" and "Radio2." It also adds a regular button named "CheckRadioButtons." This button has an "onclick" event. Clicking this button will run the function named "checkRadioButtons."

  3. 3

    Add this JavaScript function below the first "<head>" section in the file:

    <script type="text/JavaScript">

    function checkRadioButtons() {

    var selected Button = "NO BUTTON";

    var input Elements = document.getElementsByName("temperature");

    var inputElementCount = inputElements.length;

    / Loop /

    for (I = 0; I < inputElementCount; I++) {

    var current Element = input Elements[i];

    if (currentElement.checked) {

    selectedButton = currentElement.value;

    break;

    }

    }

    alert("You selected selected " + selectedButton);

    }

    </script>

    When you click the "CheckRadioButtons" button, JavaScript executes this function. The array variable "inputElements" stores the two radio button objects. The "Loop" loops through those objects and examines their "checked" properties. When it finds a checked button, it sets the value of "selectedButton" to the radio button's value.

  4. 4

    Save the file and launch your browser.

  5. 5

    Press "CTRL+O" to open the "File Open" window. Locate the file and double-click it. The browser will display the web page.

  6. 6

    Click the "CheckRadioButtons" buttons. You will see the message, "You selected NO BUTTON." Click a radio button to select it and then click "CheckRadioButtons again. You will see "You selected Hot" or "You selected Cold" -- depending on the radio button that you choose.

Tips and warnings

  • Note the "name" properties of the two radio buttons. Both radio buttons are named "temperature." You can call them anything you like, but give them the same name. Also note the "document.getElementsByName" method in the JavaScript function. Its parameter is "temperature." This parameter must match the names of your radio buttons.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.