Selected 和 Checked 的区别
在Web开发和用户界面设计中，selected和checked是两个常用的属性，它们分别用于不同的HTML元素，以表示选中状态。以下是它们的详细区别：
1. selected 属性
适用元素：主要用于<option>元素，这些元素通常嵌套在<select>元素内，形成一个下拉列表（也称为选择框）。
功能描述：当某个<option>元素被设置为selected时，它会在页面加载时自动被选中。如果多个<option>元素设置了selected属性，则根据浏览器的默认行为或HTML5标准（仅允许一个预选项），最终只有一个会被实际选中。
示例代码：
<select> <option value="apple">Apple</option> <option value="banana" selected>Banana</option> <!-- 预选中的项 --> <option value="cherry">Cherry</option> </select>
2. checked 属性
适用元素：主要用于两种类型的输入元素——<input type="checkbox">和<input type="radio">。
功能描述：
- 对于复选框（<input type="checkbox">）：当设置checked属性时，该复选框在页面加载时会显示为已选中状态。用户可以通过点击来切换其选中状态。
- 对于单选按钮（<input type="radio">）：在同一组单选按钮中，只能有一个按钮被设置为checked。设置checked属性的那个按钮会在页面加载时被选中。
示例代码：
<!-- 复选框示例 --> <label><input type="checkbox" checked> Check me!</label> <!-- 单选按钮示例 --> <p>Choose a fruit:</p> <input type="radio" id="fruit1" name="fruit" value="apple"> <label for="fruit1">Apple</label><br> <input type="radio" id="fruit2" name="fruit" value="banana" checked> <label for="fruit2">Banana</label><br> <input type="radio" id="fruit3" name="fruit" value="cherry"> <label for="fruit3">Cherry</label>
总结
- 使用selected来表示下拉列表中预选的<option>元素。
- 使用checked来表示预选的复选框（<input type="checkbox">）或单选按钮（<input type="radio">）。
理解这两个属性的正确使用场景对于创建直观且功能正确的表单至关重要。
