<input> 元素的 type 属性可以设置为 "checkbox" 来创建复选框(checkbox)。复选框允许用户从一组选项中选择一个或多个选项。以下是一个示例:
<input type="checkbox" id="option1" name="option1" value="option1">
<label for="option1">选项 1</label><input type="checkbox" id="option2" name="option2" value="option2">
<label for="option2">选项 2</label>
在上面的示例中,我们创建了两个复选框。<input> 元素的 type 属性设置为 "checkbox",id 属性定义了唯一的标识符,name 属性定义了复选框的名称,value 属性定义了复选框的值。<label> 元素通过 for 属性与相应的复选框关联,使用户点击标签时也能选中复选框。
您可以在 <form> 元素中使用复选框,以便将其值提交到服务器或使用 JavaScript 来处理选中状态的变化。通过使用 JavaScript,您可以监听复选框的事件(如 change 事件),并根据需要执行相应的操作。
<form>
<input type="checkbox" id="option1" name="option1" value="option1">
<label for="option1">选项 1</label><input type="checkbox" id="option2" name="option2" value="option2">
<label for="option2">选项 2</label>
</form><script>
// 示例:使用 JavaScript 监听复选框的变化
const option1Checkbox = document.getElementById('option1');
const option2Checkbox = document.getElementById('option2');option1Checkbox.addEventListener('change', function() {
if (this.checked) {
console.log('选项 1 被选中');
} else {
console.log('选项 1 取消选中');
}
});option2Checkbox.addEventListener('change', function() {
if (this.checked) {
console.log('选项 2 被选中');
} else {
console.log('选项 2 取消选中');
}
});
</script>
在上面的示例中,我们使用 JavaScript 监听复选框的 change 事件,并根据复选框的选中状态执行相应的操作。您可以根据您的需求和场景来处理复选框的选中状态。