HTML复选框有哪些场景？多选处理的6种checkbox用法

<form>
  <label><input type="checkbox" name="interests" value="coding"> 编程</label><br>
  <label><input type="checkbox" name="interests" value="reading"> 阅读</label><br>
  <label><input type="checkbox" name="interests" value="music"> 音乐</label><br>
  <button type="submit">提交</button>
</form>

<label><input type="checkbox" name="interests" value="coding" checked> 编程</label>

<input type="checkbox" id="select-all"> 全选/反选

<label><input type="checkbox" name="items" value="item1"> 项目1</label><br>
<label><input type="checkbox" name="items" value="item2"> 项目2</label><br>
<label><input type="checkbox" name="items" value="item3"> 项目3</label><br>

<script>
  const selectAll = document.getElementById('select-all');
  const items = document.querySelectorAll('input[name="items"]');

  selectAll.addEventListener('change', function() {
    items.forEach(item => item.checked = this.checked);
  });
</script>

const container = document.getElementById('checkbox-container');
const data = ['选项1', '选项2', '选项3'];

data.forEach(item => {
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.name = 'dynamic-checkboxes';
  checkbox.value = item;

  const label = document.createElement('label');
  label.appendChild(checkbox);
  label.appendChild(document.createTextNode(item));

  container.appendChild(label);
  container.appendChild(document.createElement('br'));
});

<style>
  .custom-checkbox {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
  }

  .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 3px;
  }

  .custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
  }

  .custom-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
  }

  .custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  .custom-checkbox input:checked ~ .checkmark:after {
    display: block;
  }

  .custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }
</style>

<label class="custom-checkbox">自定义复选框
  <input type="checkbox">
  <span class="checkmark"></span>
</label>