多選框html詳解

一、多選框代碼

多選框是一個常見的html表單元素，它可以讓用戶在多個選項中進行選擇。多選框的代碼主要由 input 元素和 type=”checkbox” 屬性組成，如下所示：

<input type="checkbox" name="fruits" value="apple">蘋果
<input type="checkbox" name="fruits" value="banana">香蕉
<input type="checkbox" name="fruits" value="orange">橙子

上面的代碼表示一個包含三個選項的多選框，它們的 name 屬性都是 fruits，value 屬性分別為 apple、banana 和 orange。

二、多選框英文

多選框的英文單詞是 checkbox，在html中，它經常和單選框（radio）一起使用，用來生成複雜的表單。

三、多選框標籤

多選框在html中的標籤是 input，它有多種類型，其中 type=”checkbox” 表示它是一個多選框。

四、多選框默認全選

多選框默認狀態下是全部選中的，如果需要指定哪些選項被選中，可以使用 checked 屬性，如下所示：

<input type="checkbox" name="fruits" value="apple" checked>蘋果
<input type="checkbox" name="fruits" value="banana">香蕉
<input type="checkbox" name="fruits" value="orange" checked>橙子

上面的代碼表示蘋果和橙子默認選中，香蕉默認未選中。

五、多選框的實現

多選框可以通過javascript來實現全選、取消全選等功能，具體實現方法如下：

<form>
  <input type="checkbox" name="option1" value="1">選項1
  <input type="checkbox" name="option2" value="2">選項2
  <input type="checkbox" name="option3" value="3">選項3
  <input type="button" value="全選" onclick="selectAll()">
  <input type="button" value="取消全選" onclick="deselectAll()">
</form>

<script>
function selectAll() {
  var checkboxes = document.getElementsByName("option");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
}

function deselectAll() {
  var checkboxes = document.getElementsByName("option");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = false;
  }
}
</script>

六、多選框被選擇事件一般用

多選框被選擇事件一般使用 onchange 事件，該事件會在多選框狀態改變時觸發，可以通過此事件來實現特定功能，如下所示：

<form>
  <input type="checkbox" name="option1" value="1" onchange="updateSelection()">選項1
  <input type="checkbox" name="option2" value="2" onchange="updateSelection()">選項2
  <input type="checkbox" name="option3" value="3" onchange="updateSelection()">選項3
</form>

<script>
function updateSelection() {
  var checkboxes = document.getElementsByName("option");
  var selection = "";
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selection += checkboxes[i].value + " ";
    }
  }
  alert("當前選項為：" + selection);
}
</script>

上面的代碼表示當多選框的選擇狀態發生改變時，會觸發 updateSelection 函數，該函數會獲取當前選中的選項值，並通過 alert 方法將其彈出。

七、多選框選中事件

多選框選中事件與單選按鈕選中事件不同，它不能直接使用 onclick 事件，而是要使用 onchange 事件，如下所示：

<form>
  <input type="checkbox" name="option1" value="1" onchange="updateSelection()">選項1
  <input type="checkbox" name="option2" value="2" onchange="updateSelection()">選項2
  <input type="checkbox" name="option3" value="3" onchange="updateSelection()">選項3
</form>

<script>
function updateSelection() {
  var checkboxes = document.getElementsByName("option");
  var selection = "";
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selection += checkboxes[i].value + " ";
    }
  }
  alert("當前選項為：" + selection);
}
</script>

八、html多選按鈕屬性

除了 name 和 value 屬性外，多選框還可以設置其他屬性，如 disabled 屬性表示禁用多選框，如下所示：

<input type="checkbox" name="option1" value="1" disabled>選項1
<input type="checkbox" name="option2" value="2">選項2
<input type="checkbox" name="option3" value="3" disabled>選項3

上面的代碼表示選項1和選項3被禁用，無法進行選擇。

九、html表單多選

多選框是html表單中常用的一種元素，它可以用來收集用戶的選擇信息，如下所示：

<form>
  <input type="checkbox" name="option1" value="1">選項1
  <input type="checkbox" name="option2" value="2">選項2
  <input type="checkbox" name="option3" value="3">選項3
  <input type="submit" value="提交">
</form>

上面的代碼表示一個包含三個選項的多選框表單，用戶可以選擇多個選項並提交表單。

十、html實現多選下拉框選取

如果需要在多選框中顯示下拉框樣式，可以使用select和option標籤來實現，如下所示：

<select multiple name="fruits">
  <option value="apple">蘋果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

上面的代碼表示一個包含三個選項的多選下拉框，在下拉框樣式的列表中用戶可以選擇多個選項。