js实现单选
实现单选功能的JavaScript方法
使用HTML和JavaScript实现单选功能可以通过多种方式完成，以下是几种常见的方法：
HTML结构示例
<div class="radio-group">
<input type="radio" name="option" id="option1" value="1">
<label for="option1">选项1</label>
<input type="radio" name="option" id="option2" value="2">
<label for="option2">选项2</label>
<input type="radio" name="option" id="option3" value="3">
<label for="option3">选项3</label>
</div>纯JavaScript实现
监听change事件
const radios = document.querySelectorAll('input[name="option"]');
radios.forEach(radio => {
radio.addEventListener('change', function() {
if(this.checked) {
console.log('选中的值:', this.value);
}
});
});获取选中值
function getSelectedValue() {
const selected = document.querySelector('input[name="option"]:checked');
return selected ? selected.value : null;
}使用事件委托优化
对于大量单选按钮，可以使用事件委托：
document.querySelector('.radio-group').addEventListener('change', function(e) {
if(e.target.type === 'radio') {
console.log('选中的值:', e.target.value);
}
});动态设置选中状态
function setSelectedValue(value) {
const radio = document.querySelector(`input[name="option"][value="${value}"]`);
if(radio) {
radio.checked = true;
}
}使用classList管理样式
为选中的单选按钮添加样式类：
document.querySelectorAll('input[name="option"]').forEach(radio => {
radio.addEventListener('change', function() {
document.querySelectorAll('input[name="option"]').forEach(r => {
r.nextElementSibling.classList.remove('selected');
});
if(this.checked) {
this.nextElementSibling.classList.add('selected');
}
});
});注意事项
- 确保所有单选按钮的name属性相同，这样浏览器会自动处理单选逻辑
- 使用label元素可以提高用户体验，点击文本也能选中单选按钮
- 考虑添加默认选中项：
<input type="radio" checked> - 移动端开发可能需要调整样式以适应触摸操作
这些方法可以根据具体需求组合使用，实现灵活的单选功能。
