radio点击文字切换

在HTML中，元素是一种表单控件，用于在一组选项中选择一个。默认情况下，你是不能通过点击文字来选中单选按钮的。但是，你可以通过CSS和JavaScript来实现这个功能。

以下是一个简单的示例，展示了如何通过点击相关文字来选中单选按钮：

HTML:

html


选项1



选项2

CSS:

css
.radio-button {
display: none;
}

.radio-text {
cursor: pointer;
}

.radio-button:checked + .radio-text {
font-weight: bold;
}
JavaScript:

javascript
document.querySelectorAll(‘.radio-label’).forEach(function(radio) {
radio.addEventListener(‘click’, function(e) {
if (e.target.tagName === ‘SPAN’) {
var radioButton = radio.querySelector(‘.radio-button’);
radioButton.checked = !radioButton.checked;
}
});
});
在这个示例中，我们为每个单选按钮和其相关文字设置了一个label。单选按钮设置为display: none，这意味着它在页面上不可见。当用户点击相关文字时，JavaScript 代码会被触发，它会查找并选中对应的单选按钮。选中的按钮通过CSS使得文字加粗显示，从视觉上表示选中状态。