js多选风格

<form>
  <input type="checkbox" id="option1" name="option1" value="Option 1">
  <label for="option1">Option 1</label><br>
  <input type="checkbox" id="option2" name="option2" value="Option 2">
  <label for="option2">Option 2</label><br>
  <input type="checkbox" id="option3" name="option3" value="Option 3">
  <label for="option3">Option 3</label><br>
  <button type="submit">Submit</button>
</form>

<div id="checkboxContainer"></div>
<script>
  const options = ['Option 1', 'Option 2', 'Option 3'];
  options.forEach(option => {
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = option;
    checkbox.name = option;
    checkbox.value = option;

    const label = document.createElement('label');
    label.htmlFor = option;
    label.appendChild(document.createTextNode(option));

    const br = document.createElement('br');
    document.getElementById('checkboxContainer').appendChild(checkbox);
    document.getElementById('checkboxContainer').appendChild(label);
    document.getElementById('checkboxContainer').appendChild(br);
  });
</script>

<form>
  <select name="options" multiple>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </select>
  <button type="submit">Submit</button>
</form>