📌  相关文章
📜  如何使用 JavaScript 在 Select Option 中使用 Checkbox ？(1)

📅  最后修改于: 2023-12-03 15:08:20.167000             🧑  作者: Mango

如何使用 JavaScript 在 Select Option 中使用 Checkbox？

在 HTML 中，Select 选项一般是单选的，不支持多选。但是，我们可以通过 JavaScript 来实现在 Select 中使用 Checkbox 进行多选的功能。

首先，在 HTML 中添加一个 Select 元素，以及一些 Checkbox 元素来表示选项：

<select id="mySelect" multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<label for="option1">选项1</label>
<input type="checkbox" id="option1" value="1">
<label for="option2">选项2</label>
<input type="checkbox" id="option2" value="2">
<label for="option3">选项3</label>
<input type="checkbox" id="option3" value="3">

注意，这里要在 Select 上添加 multiple 属性来支持多选。

接下来，我们可以使用 JavaScript 来监听 Checkbox 的选中状态，然后根据选中状态来更新 Select 中的选项：

function updateSelect() {
  const select = document.getElementById('mySelect');
  const selectOptions = select.options;
  for (let i = 0; i < selectOptions.length; i++) {
    selectOptions[i].selected = false;
  }
  const option1 = document.getElementById('option1');
  const option2 = document.getElementById('option2');
  const option3 = document.getElementById('option3');
  if (option1.checked) {
    selectOptions[0].selected = true;
  }
  if (option2.checked) {
    selectOptions[1].selected = true;
  }
  if (option3.checked) {
    selectOptions[2].selected = true;
  }
}

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (const checkbox of checkboxes) {
  checkbox.addEventListener('change', updateSelect);
}

这里的 updateSelect 函数会遍历 Select 中的每一个选项，将其选中状态设为 false。然后，根据 Checkbox 的选中状态来更新 Select 中的选项。最后，我们使用 addEventListener 来监听 Checkbox 的 change 事件，当 Checkbox 的状态发生变化时，就调用 updateSelect 函数去更新 Select。

完整代码片段如下：

<!DOCTYPE html>
<html>
<head>
  <title>Select Checkbox</title>
</head>
<body>

  <select id="mySelect" multiple>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>

  <label for="option1">选项1</label>
  <input type="checkbox" id="option1" value="1">
  <label for="option2">选项2</label>
  <input type="checkbox" id="option2" value="2">
  <label for="option3">选项3</label>
  <input type="checkbox" id="option3" value="3">

  <script>
    function updateSelect() {
      const select = document.getElementById('mySelect');
      const selectOptions = select.options;
      for (let i = 0; i < selectOptions.length; i++) {
        selectOptions[i].selected = false;
      }
      const option1 = document.getElementById('option1');
      const option2 = document.getElementById('option2');
      const option3 = document.getElementById('option3');
      if (option1.checked) {
        selectOptions[0].selected = true;
      }
      if (option2.checked) {
        selectOptions[1].selected = true;
      }
      if (option3.checked) {
        selectOptions[2].selected = true;
      }
    }

    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (const checkbox of checkboxes) {
      checkbox.addEventListener('change', updateSelect);
    }
  </script>

</body>
</html>

以上就是在 Select Option 中使用 Checkbox 的 JavaScript 实现方法。