mh108
3/3/2020 - 11:36 PM

Radio Buttons Demo

How to process a group of radio buttons with JavaScript

radio-buttons.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Radio Buttons Demo</title>
</head>

<body>
  <h2>Radio Buttons Demo</h2>
  <h3>Select the Size of your Pizza</h3>
  <p>
    <input type="radio" name="size" value="small"> Small
    <input type="radio" name="size" value="medium"> Medium
    <input type="radio" name="size" value="large"> Large
  </p>
  <button>Submit Order</button>
  <hr>
  <div id="outputDiv"></div>
  <script src="radio-buttons.js"></script>
</body>

</html>
radio-buttons.js
content_copyfile_download
// jshint esversion: 6

//1. One Ring to Rule Them All
let controller = function() {
  let pizzaSize, radioElems, resultStr;

  //fetch all the radio buttons
  radioElems = document.querySelectorAll("input[type=radio]");

  //which button was selected?
  if (radioElems[0].checked) {
    pizzaSize = radioElems[0].value;
    //console.log(pizzaSize);
  } else if (radioElems[1].checked) {
    pizzaSize = radioElems[1].value;
    //console.log(pizzaSize);
  } else if (radioElems[2].checked) {
    pizzaSize = radioElems[2].value;
    //console.log(pizzaSize);
  }

      /* A loop also works, although only one button can be selected
      //which button is selected?
      for (let i = 0; i < radioElems.length; i++) {
        if(radioElems[i].checked){
          pizzaSize = radioElems[i].value;
        }
      }
      */

  //display selection on web page
  resultStr = `You ordered a ${pizzaSize} pizza.`
  document.querySelector("div").textContent = resultStr;
};

//2. register the onclick handlers after the DOM is complete
window.addEventListener("load", function() {
  //select the buttons
  var buttons = document.querySelectorAll("button");

  //register the same handler for each button
  for (var i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener("click", controller);
  }
});