js实现单选按钮单击选中，再单击取消选中

2024-12-23 11:04:09 JS 1472

实现单选按钮（radio button）在单击时选中，再次单击时取消选中，可以通过以下步骤来实现：

1. HTML结构

首先，创建一个单选按钮的HTML结构：

html
<input type="radio" id="myRadioButton" name="myRadioGroup">
<label for="myRadioButton">选项</label>

这里使用了 <input type="radio"> 标签和一个 <label> 标签。id 属性用于关联 <label> 标签和 <input> 标签，name 属性用于指定单选按钮组，确保只能选择一个单选按钮。

2. JavaScript事件处理

使用JavaScript来处理单击事件，实现选中和取消选中的逻辑。

javascript
const radioBtn = document.getElementById('myRadioButton');

radioBtn.addEventListener('click', function() {
    if (this.checked) {
        this.checked = false; // 取消选中
    } else {
        this.checked = true; // 选中
    }
});

3. 解释代码逻辑

addEventListener('click', function() { ... })：监听单选按钮的点击事件。
this.checked：单选按钮的 checked 属性表示当前是否选中。
如果单选按钮已经选中 (this.checked 为 true)，则点击时将其设为未选中 (this.checked = false)。
如果单选按钮未选中 (this.checked 为 false)，则点击时将其设为选中 (this.checked = true)。

4. 完整示例

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮选中和取消选中</title>
</head>
<body>
<input type="radio" id="myRadioButton" name="myRadioGroup">
<label for="myRadioButton">选项</label>

<script>
const radioBtn = document.getElementById('myRadioButton');

radioBtn.addEventListener('click', function() {
    if (this.checked) {
        this.checked = false; // 取消选中
    } else {
        this.checked = true; // 选中
    }
});
</script>
</body>
</html>

注意事项

单选按钮默认的行为是一旦选中就不能取消选中，所以上述方法通过改变 checked 属性来模拟取消选中的效果。
这种方法依赖于单击事件来切换状态，对于辅助技术（如屏幕阅读器）可能会有一些影响，因为它改变了单选按钮的标准行为。

通过上述步骤，你可以实现在单击单选按钮时选中和取消选中的效果，使用户可以灵活地控制单选按钮的状态。