在 HTML 中,我們可以使用 checkbox(復選框) 來建立一個單選框,下面我們將具體介紹如何實現(xiàn)這個功能。
<form> <input type="checkbox" name="選項1" value="選項1">選項1<br> <input type="checkbox" name="選項2" value="選項2">選項2<br> <input type="checkbox" name="選項3" value="選項3">選項3<br> </form>
上面的代碼中,我們使用了 input 標簽來創(chuàng)建 checkbox,type 屬性設置為 "checkbox" 表示這是一個復選框。name 屬性是這個復選框的名稱,可以用來在后臺接收用戶的選擇。value 屬性則是這個復選框?qū)闹怠?/p>
在使用復選框的時候,我們通常需要保證用戶只能選擇其中的一個選項。為了實現(xiàn)這個功能,我們需要使用 JavaScript。
<form> <input type="checkbox" name="選項1" value="選項1" onclick="check(this)">選項1<br> <input type="checkbox" name="選項2" value="選項2" onclick="check(this)">選項2<br> <input type="checkbox" name="選項3" value="選項3" onclick="check(this)">選項3<br> </form> <script> function check(sender) { var checkboxes = document.getElementsByName(sender.name); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } sender.checked = true; } </script>
上面的代碼中,我們設置了每個復選框的 onclick 事件,當用戶點擊復選框時,會觸發(fā) check 函數(shù)。這個函數(shù)首先獲取當前復選框?qū)乃袕瓦x框,然后將所有復選框的狀態(tài)都設為未選中,最后將當前復選框的狀態(tài)設為選中。
這樣,用戶在選擇了一個選項后,將無法再選擇其他選項,就實現(xiàn)了單選框的功能。