<main>
  <h2>The <code>defaultChecked</code> Property on Radio Buttons</h2>

  <p>The first button on this page uses the <code>checked</code> property to find out which radio button is selected. The second button uses the <code>defaultChecked</code> property to find out which item was originally checked by default. Try selecting a different option, then use the buttons again.</p>

  <form id="form">
    <p>
      <input type="radio" value="one" name="setOne"> One<br />
      <input type="radio" value="two" name="setOne" checked> Two<br />
      <input type="radio" value="three" name="setOne"> Three
    </p>
  </form>
  
  <button>Get Current Checked</button> <button>Get Default Checked</button>
  
  <output></output>

</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

form {
  max-width: 500px;
  margin: auto;
}

output {
  display: block;
  font-weight: bold;
  padding: 20px;
}

let myForm = document.getElementById('form'),
    btn = document.querySelector('button'),
    btn2 = document.querySelectorAll('button')[1],
    op = document.querySelector('output'),
    i;

btn.addEventListener('click', function () {
  for (i of myForm.setOne) {
    if (i.checked === true) {
      op.innerHTML = `Current selected option is: ${i.value}`;
    }
  }
}, false);

btn2.addEventListener('click', function () {
  for (i of myForm.setOne) {
    if (i.defaultChecked === true) {
      op.innerHTML = `The default selected option is: ${i.value}`;
    }
  }
}, false);