在HTML中，复选框（checkbox）和单选框（radio）是常见的表单元素，它们允许用户进行多项选择或单项选择。对于这两种元素，事件处理是一个重要的部分，用于响应用户的操作，如点击、选择或取消选择。
### 复选框（Checkbox）事件
复选框允许用户选择零个、一个或多个选项。常见的事件包括：
- **click**: 当用户点击复选框时触发。
- **change**: 当复选框的选中状态发生变化时触发（从选中到未选中，或从未选中到选中）。
#### 示例代码
<input type="checkbox" id="chk1" name="chkbox" value="Option 1"> Option 1<br>
<input type="checkbox" id="chk2" name="chkbox" value="Option 2"> Option 2<br>
<script>
document.getElementById('chk1').addEventListener('change', function() {
alert('Checkbox 1 state changed!');
});
document.getElementById('chk2').addEventListener('click', function() {
alert('Checkbox 2 clicked!');
});
</script>
### 单选框（Radio）事件
单选框允许用户在一组选项中选择一个选项。与复选框不同，单选框的`name`属性应该相同，以确保它们是互斥的。常见的事件也是`click`和`change`。
#### 示例代码
<input type="radio" id="radio1" name="radio" value="Option A"> Option A<br>
<input type="radio" id="radio2" name="radio" value="Option B"> Option B<br>
<script>
document.querySelector('input[name="radio"]').addEventListener('change', function() {
alert('Radio button state changed!');
});
// 或者针对具体的radio
document.getElementById('radio1').addEventListener('click', function() {
alert('Radio 1 clicked!');
});
</script>
注意，虽然`click`事件在单选框上也可以使用，但`change`事件更常用于处理单选框和复选框的状态变化，因为它只在状态实际改变时才触发。
这些示例展示了如何在HTML中为复选框和单选框添加事件监听器，并演示了如何响应`click`和`change`事件。在实际应用中，您可以根据需要添加更多的逻辑来处理用户的选择。