Checkboxes and radio buttons

A checkbox field is a simple binary toggle. Its value can be extracted or changed through its checked property, which holds a Boolean value.

<input type="checkbox" id="purple">
<label for="purple">Makethispagepurple</label>

<script>
var checkbox = document.querySelector("#purple");
checkbox.addEventListener("change", function() {
    document.body.style.background =
        checkbox.checked ? "mediumpurple" : "";
});
</script>

The <label> tag is used to associate a text with an input field(checkbox/ radio). Its for attribute should refer to the id of the field. Clicking the label will activate the field, which focuses it and toggles its value when it is a checkbox or radio button.

A radio button is similar to a checkbox, but it's linked to other radio buttons with the same name attribute so that only one of them can be active at any time.

snippet

Color:
<input type="radio" name="color" value="mediumpurple">Purple
<input type="radio" name="color" value="lightgreen">Green
<input type="radio" name="color" value="lightblue">Blue

<script>
var buttons = document.getElementsByName("color");
functionsetColor(event) {
    document.body.style.background = event.target.value;
}
for (vari = 0; i & lt; buttons.length; i++)
    buttons[i].addEventListener("change", setColor);
</script>

The document.getElementsByName method gives us all elements with a given name attribute. The example loops over those (with a regular for loop, not forEach, because the returned collection is not a real array) and registers an event handler for each element. The event objects have a target property referring to the element that triggered the event.