溫馨提示×

HTML 5基礎(chǔ)教程
首頁 > 教程 > 編程開發(fā) > HTML 5基礎(chǔ)教程 > 復(fù)選框

復(fù)選框

復(fù)選框（Checkbox）是 HTML 表單中的一種標(biāo)簽，允許用戶在一組給定的選項(xiàng)中進(jìn)行多項(xiàng)選擇。在 HTML 5 中，復(fù)選框的語法非常簡單，可以通過 <input type="checkbox"> 標(biāo)簽來創(chuàng)建一個(gè)復(fù)選框。

下面是一個(gè)基本的復(fù)選框示例：

<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Example</title>
</head>
<body>
    <h2>Select your favourite fruits:</h2>
    <form>
        <input type="checkbox" id="apple" name="fruits" value="apple">
        <label for="apple">Apple</label><br>
        
        <input type="checkbox" id="banana" name="fruits" value="banana">
        <label for="banana">Banana</label><br>
        
        <input type="checkbox" id="orange" name="fruits" value="orange">
        <label for="orange">Orange</label><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

在上面的示例中，我們創(chuàng)建了一個(gè)包含蘋果、香蕉和橙子復(fù)選框的表單。每個(gè)復(fù)選框都有一個(gè)唯一的 id、name 和 value 屬性。 id 屬性用于與 label 元素關(guān)聯(lián)， name 屬性用于標(biāo)識表單中的字段， value 屬性表示該選項(xiàng)的值。

用戶可以選擇多個(gè)復(fù)選框，然后點(diǎn)擊提交按鈕將選擇的值發(fā)送到服務(wù)器端進(jìn)行處理。

在實(shí)際應(yīng)用中，可以使用 JavaScript 來處理復(fù)選框的選擇狀態(tài)。以下是一個(gè)簡單的 JavaScript 代碼示例，用于檢查用戶是否選擇了某個(gè)復(fù)選框：

<script>
    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault();
        
        var selectedFruits = document.querySelectorAll('input[name="fruits"]:checked');
        
        var selectedValues = [];
        selectedFruits.forEach(function(fruit) {
            selectedValues.push(fruit.value);
        });
        
        alert('Selected fruits: ' + selectedValues.join(', '));
    });
</script>

在上面的代碼中，我們首先獲取了所有被選中的復(fù)選框，然后將它們的值存儲(chǔ)在一個(gè)數(shù)組中，并最終使用 alert 函數(shù)顯示用戶所選擇的水果。

希望這個(gè)簡單的教程對您有所幫助，如果您有任何疑問，請隨時(shí)詢問。