如何讓你的網頁複選框只能單選

一、什麼是複選框和單選框

複選框和單選框是HTML表單中兩種常見的輸入控制項，複選框允許用戶選擇一個或多個選項，而單選框只允許用戶選擇一個選項。

<input type="checkbox" name="option" value="1">Option 1</input>
<input type="checkbox" name="option" value="2">Option 2</input>
<input type="checkbox" name="option" value="3">Option 3</input>

<input type="radio" name="option" value="1">Option 1</input>
<input type="radio" name="option" value="2">Option 2</input>
<input type="radio" name="option" value="3">Option 3</input>

二、讓複選框只能單選的方法

1. JavaScript

使用JavaScript可以通過監聽複選框的點擊事件，來實現只能單選的效果。

<script>
var checkboxes = document.getElementsByName('option');

function uncheckAll() {
  for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = false;
  }
}

for(var i=0; i<checkboxes.length; i++) {
  checkboxes[i].addEventListener('click', function() {
    uncheckAll();
    this.checked = true;
  });
}
</script>

該代碼片段中，首先獲取所有的name為option的複選框，然後通過循環為每個複選框添加點擊事件監聽器。事件處理函數中先調用uncheckAll函數將所有複選框都取消選中，再將當前複選框選中。

2. HTML

在HTML中，可以使用radio類型的input標籤來實現只能單選的效果。將所有複選框的type修改為radio，並為每個複選框設置相同的name屬性即可。

<input type="radio" name="option" value="1">Option 1</input>
<input type="radio" name="option" value="2">Option 2</input>
<input type="radio" name="option" value="3">Option 3</input>

三、小結

無論是使用JavaScript還是HTML，在實現複選框只能單選時，都需要為所有複選框設置相同的name屬性，在JavaScript中需要通過監聽點擊事件來實現，而在HTML中可以直接使用radio類型的input標籤。