HTML复选框怎么定义_HTML复选框checkbox的用法与多选实现

<input type="checkbox" id="option1" name="fruit" value="apple">
<label for="option1">苹果</label>

<input type="checkbox" id="option2" name="fruit" value="banana">
<label for="option2">香蕉</label>

<input type="checkbox" id="option3" name="fruit" value="orange" checked>
<label for="option3">橙子（默认选中）</label>

// 方法一：通过 querySelectorAll 获取所有选中的 checkbox
const checkboxes = document.querySelectorAll('input[name="fruit"]:checked');
const selectedValues = [];

checkboxes.forEach((box) => {
  selectedValues.push(box.value);
});

console.log(selectedValues); // 如：["apple", "orange"]

document.querySelectorAll('input[name="fruit"]').forEach(box => {
  box.addEventListener('change', function() {
    if (this.checked) {
      console.log(this.value + ' 被选中');
    } else {
      console.log(this.value + ' 被取消');
    }
  });
});

<form action="/submit" method="post">
  <input type="checkbox" name="hobby" value="reading"> 阅读 <br>
  <input type="checkbox" name="hobby" value="music"> 听音乐 <br>
  <input type="checkbox" name="hobby" value="sports"> 运动 <br>
  <button type="submit">提交</button>
</form>

.custom-checkbox {
  display: none;
}
.custom-label {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  user-select: none;
}
.custom-checkbox:checked + .custom-label {
  background-color: #007bff;
  color: white;
}

<input type="checkbox" class="custom-checkbox" id="cb1">
<label class="custom-label" for="cb1">自定义样式复选框</label>