Checkboxex and Radio Buttons

This example showing the difference between a checkbox and radio buttons. Note that "id" is an attribute used to identify an element in CSS. Forms are not used in this example. However, we identify values here by name since this is the means to identify interface values when data is transmitted to other scripts or pages using forms.

HTML

<p>
  <!-- Checkbox example -->
  Check if Australian Citizen
  <input type="checkbox" name="citizen" value="yes" />
</p>
<p>
  <!-- Radio button example -->
  My gender is:
  <input type="radio" name="gender" value="Male">Male</input>
  <input type="radio" name="gender" value="Female">Female</input>
  <input type="radio" name="gender" value="Unspecified">Decline to specify</input>
  <input type="radio" name="gender" value="both">Both</input>
</p>
<button onclick="report()">Show</button>

JavaScript

function report() {
  // get the values of the checkbox and radio buttons by name
  var citizenResult = document.getElementsByName("citizen");
  var genderResult = document.getElementsByName("gender");

  // Store vallues in a variable called result
  var result = "";

  // Only one checkbox, but getElementsByName returns an array
  result += "citizen: " + citizenResult[0].checked + "\n\n";

  // Cycle through all the radio buttons with name gender
  for (var g = 0; g < genderResult.length; g++)
    result += "gender: " + genderResult[g].value + " is " + genderResult[g].checked + "\n\n";

  // Show me!
  alert(result);
}