如何配置HTML单选按钮 - 未分类学习-微参考

HTML单选按钮（Radio buttons）是表单中的一种基础元素，用于在多个选项中选择一个选项。在HTML中，单选按钮是通过``标签的`type=”radio”`属性来创建的。以下是如何设置HTML中的单选按钮的详细说明。

创建基础的单选按钮

在HTML中，你可以如下创建一组单选按钮：

Option 1 Option 2 Option 3

在这段代码中，每个单选按钮都有以下属性：

`type=”radio”`：定义这是一个单选按钮。

`id`：一个唯一标识符，用于将单选按钮与标签（label）关联。

`name`：指定单选按钮所属的组别。具有相同`name`属性的按钮属于同一组，同一组内的按钮只能选择一个。

`value`：当单选按钮被选中时，该值会发送到服务器。

设置默认选中

若要设置默认选中的单选按钮，可以在`input`元素中添加`checked`属性：

Option 1

禁用单选按钮

如果需要禁用某个单选按钮，可以使用`disabled`属性：

Disabled Option

禁用的单选按钮不可选择，通常显示为灰色。

使用CSS样式化单选按钮

你可以使用CSS来改变单选按钮的视觉效果。以下是一个简单的例子：

input[type="radio"] {
/* 自定义单选按钮的样式 */
accent-color: #4CAF50; /* 改变选中时的高亮颜色 */
}

input[type="radio"]:checked {
/* 选中时的样式 */
}

input[type="radio"]:disabled {
/* 禁用时的样式 */
}

在JavaScript中操作单选按钮

在JavaScript中，你可以获取单选按钮的状态，并对其进行动态操作。

// 获取单选按钮元素
var radioButtons = document.querySelectorAll('input[name="options"]');

// 检查某个单选按钮是否被选中
function isRadioChecked(radio) {
return radio.checked;
}

// 为单选按钮添加事件监听器
radioButtons.forEach(radio => {
radio.addEventListener('change', function() {
if (isRadioChecked(this)) {
console.log(this.value + ' is selected');
}
});
});