HTML复选框和单选框

在网页设计中，常常需要让用户选择一些选项。HTML提供了复选框和单选框，来满足这个需求。

什么是复选框？

复选框是一种HTML表单元素，允许用户选择一个或多个选项。当用户点击复选框时，它的状态会从未选中变为选中，或从选中变为未选中。

<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子

上面的代码创建了三个复选框，分别对应苹果、香蕉和橙子。它们的name属性相同，因此只有一个选项可以被选择。当用户选中一个或多个选项并提交表单时，服务器会收到一个名为fruit的数组，其中包含了所有选中的值。

什么是单选框？

单选框是一种HTML表单元素，允许用户从一组选项中选择一个选项。当用户点击单选框时，它的状态会从未选中变为选中，同时其他单选框的状态会变为未选中。

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

上面的代码创建了两个单选框，分别对应男和女。它们的name属性相同，因此只有一个选项可以被选择。当用户选择一个选项并提交表单时，服务器会收到名为gender的值，其值为选中的选项的value属性。

常见问题

1. 如何设置默认选中的选项？

可以在复选框和单选框的标签中添加checked属性，来设置默认选中的选项。例如：

<input type="checkbox" name="fruit" value="apple" checked>苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange" checked>橙子

上面的代码中，苹果和橙子默认被选中。

2. 如何使用JavaScript获取选中的选项？

可以使用JavaScript获取选中的复选框和单选框的值。例如：

// 获取选中的复选框
var fruits = document.querySelectorAll('input[name="fruit"]:checked');
for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i].value);
}

// 获取选中的单选框
var gender = document.querySelector('input[name="gender"]:checked').value;
console.log(gender);

上面的代码中，querySelectorAll方法可以获取所有选中的复选框，querySelector方法可以获取选中的单选框。

3. 复选框和单选框有哪些其他的属性？

复选框和单选框还有其他一些属性，可以用来控制它们的行为。例如：

• disabled：禁用复选框或单选框
• required：设置复选框或单选框为必填项
• readonly：设置复选框或单选框为只读

可以在复选框和单选框的标签中添加这些属性，来控制它们的行为。