选择框和单选框

一个选择框只是一个双选切换。其值可以通过其包含一个布尔值的checked属性来获取和更改。

  1. <label>
  2.   <input type="checkbox" id="purple"> Make this page purple
  3. </label>
  4. <script>
  5.   let checkbox = document.querySelector("#purple");
  6.   checkbox.addEventListener("change", () => {
  7.     document.body.style.background =
  8.       checkbox.checked ? "mediumpurple" : "";
  9.   });
  10. </script>

<label>标签关联部分文本和一个输入字段。点击标签上的任何位置将激活该字段，这样会将其聚焦，并当它为复选框或单选按钮时切换它的值。

单选框和选择框类似，不过单选框可以通过相同的name属性，隐式关联其他几个单选框，保证只能选择其中一个。

  1. Color:
  2. <label>
  3.   <input type="radio" name="color" value="orange"> Orange
  4. </label>
  5. <label>
  6.   <input type="radio" name="color" value="lightgreen"> Green
  7. </label>
  8. <label>
  9.   <input type="radio" name="color" value="lightblue"> Blue
  10. </label>
  11. <script>
  12.   let buttons = document.querySelectorAll("[name=color]");
  13.   for (let button of Array.from(buttons)) {
  14.     button.addEventListener("change", () => {
  15.       document.body.style.background = button.value;
  16.     });
  17.   }
  18. </script>

提供给querySelectorAll的 CSS 查询中的方括号用于匹配属性。 它选择name属性为"color"的元素。