js checkbox 属性

<form id="myForm">
  <input type="checkbox" id="option1" name="option" value="1">
  <label for="option1">Option 1</label><br>
  <input type="checkbox" id="option2" name="option" value="2">
  <label for="option2">Option 2</label><br>
  <input type="checkbox" id="option3" name="option" value="3">
  <label for="option3">Option 3</label><br>
  <button type="button" onclick="submitForm()">Submit</button>
</form>

function submitForm() {
  const checkboxes = document.querySelectorAll('#myForm input[name="option"]:checked');
  const selectedOptions = Array.from(checkboxes).map(cb => cb.value);
  console.log('Selected Options:', selectedOptions);
  // 这里可以添加进一步的处理逻辑，比如发送数据到服务器
}

document.addEventListener('DOMContentLoaded', function() {
  // 确保DOM完全加载后再执行相关操作
  const checkboxes = document.querySelectorAll('#myForm input[name="option"]');
  checkboxes.forEach(cb => {
    cb.addEventListener('change', function() {
      console.log('Checkbox changed:', this.checked);
    });
  });
});

function addCheckbox(id, label) {
  const form = document.getElementById('myForm');
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.id = id;
  checkbox.name = 'option';
  checkbox.value = id;

  const labelElement = document.createElement('label');
  labelElement.for = id;
  labelElement.textContent = label;

  form.appendChild(checkbox);
  form.appendChild(labelElement);
  form.appendChild(document.createElement('br'));

  // 重新绑定事件监听器
  checkbox.addEventListener('change', function() {
    console.log('Checkbox changed:', this.checked);
  });
}