复选框_HTML 5基础教程

复选框

复选框（Checkbox）是 HTML 表单中的一种标签，允许用户在一组给定的选项中进行多项选择。在 HTML 5 中，复选框的语法非常简单，可以通过 <input type="checkbox"> 标签来创建一个复选框。

下面是一个基本的复选框示例：

<!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>

在上面的示例中，我们创建了一个包含苹果、香蕉和橙子复选框的表单。每个复选框都有一个唯一的 id、name 和 value 属性。 id 属性用于与 label 元素关联， name 属性用于标识表单中的字段， value 属性表示该选项的值。

用户可以选择多个复选框，然后点击提交按钮将选择的值发送到服务器端进行处理。

在实际应用中，可以使用 JavaScript 来处理复选框的选择状态。以下是一个简单的 JavaScript 代码示例，用于检查用户是否选择了某个复选框：

<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>

在上面的代码中，我们首先获取了所有被选中的复选框，然后将它们的值存储在一个数组中，并最终使用 alert 函数显示用户所选择的水果。

希望这个简单的教程对您有所帮助，如果您有任何疑问，请随时询问。