Checkbox, Radio and Select Values in JavaScript

<label><input type="checkbox" id="terms"> I accept the terms</label>
<script>
  const box = document.querySelector("#terms");

  console.log(box.checked); // → false
  box.checked = true;
  console.log(box.checked); // → true
  console.log(box.value);   // → on   (the value sent with a form, "on" by default)
</script>

<label><input type="radio" name="plan" value="free" checked> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<script>
  const chosen = document.querySelector("input[name='plan']:checked");
  console.log(chosen.value); // → free

  document.querySelectorAll("input[name='plan']").forEach(radio => {
    radio.addEventListener("change", () => console.log("Plan:", radio.value));
  });
</script>

<select id="city">
  <option value="">Choose…</option>
  <option value="pune">Pune</option>
  <option value="delhi" selected>Delhi</option>
</select>
<script>
  const select = document.querySelector("#city");

  console.log(select.value);                               // → delhi
  console.log(select.selectedIndex);                       // → 2
  console.log(select.selectedOptions[0].textContent);      // → Delhi
  select.value = "pune";                                   // choose by value
  console.log(select.value);                               // → pune
</script>

<select id="tags" multiple>
  <option value="js" selected>JS</option>
  <option value="css">CSS</option>
  <option value="html" selected>HTML</option>
</select>
<script>
  const values = [...document.querySelector("#tags").selectedOptions].map(o => o.value);
  console.log(values); // → ["js", "html"]
</script>

<label><input type="checkbox" name="topic" value="js" checked> JS</label>
<label><input type="checkbox" name="topic" value="css"> CSS</label>
<label><input type="checkbox" name="topic" value="html" checked> HTML</label>
<script>
  const checked = [...document.querySelectorAll("input[name='topic']:checked")].map(c => c.value);
  console.log(checked); // → ["js", "html"]
</script>