给我用js实现一个单选按钮可根据右侧选项增加或删除
时间: 2024-02-06 19:08:53 浏览: 41
好的,以下是一个简单的实现,你可以根据自己的需求进行修改和优化:
```html
<!DOCTYPE html>
<html>
<head>
<title>单选按钮增删示例</title>
</head>
<body>
<label>
<input type="radio" name="options" value="option1" checked="checked">选项1
</label><br>
<label>
<input type="radio" name="options" value="option2">选项2
</label><br>
<label>
<input type="radio" name="options" value="option3">选项3
</label><br><br>
<div id="options-container">
<!-- 右侧选项容器 -->
</div>
<script>
const optionsContainer = document.getElementById('options-container');
// 初始化选项1的右侧选项
addOption('option1');
// 监听单选按钮的变化
document.querySelectorAll('input[name="options"]').forEach((radio) => {
radio.addEventListener('change', (event) => {
// 清空右侧选项容器
optionsContainer.innerHTML = '';
// 根据选中的单选按钮值添加对应的右侧选项
addOption(event.target.value);
});
});
function addOption(value) {
switch(value) {
case 'option1':
// 选项1的右侧选项
optionsContainer.innerHTML = `
<label>
<input type="checkbox" name="options1" value="option1-1">选项1-1
</label><br>
<label>
<input type="checkbox" name="options1" value="option1-2">选项1-2
</label><br>
<label>
<input type="checkbox" name="options1" value="option1-3">选项1-3
</label><br>
`;
break;
case 'option2':
// 选项2的右侧选项
optionsContainer.innerHTML = `
<label>
<input type="checkbox" name="options2" value="option2-1">选项2-1
</label><br>
<label>
<input type="checkbox" name="options2" value="option2-2">选项2-2
</label><br>
`;
break;
case 'option3':
// 选项3的右侧选项
optionsContainer.innerHTML = `
<label>
<input type="checkbox" name="options3" value="option3-1">选项3-1
</label><br>
<label>
<input type="checkbox" name="options3" value="option3-2">选项3-2
</label><br>
<label>
<input type="checkbox" name="options3" value="option3-3">选项3-3
</label><br>
<label>
<input type="checkbox" name="options3" value="option3-4">选项3-4
</label><br>
`;
break;
}
}
</script>
</body>
</html>
```
以上代码中,我们首先在页面中创建了三个单选按钮,每个单选按钮对应一个值。然后我们在页面中创建了一个空的容器 `options-container`,用于展示右侧的选项。
接下来,我们监听了单选按钮的变化事件,当单选按钮的值发生变化时,我们清空右侧选项容器,根据选中的单选按钮值添加对应的右侧选项。
最后,我们定义了一个 `addOption` 函数,根据传入的值添加对应的选项到右侧选项容器中。在这个函数中,我们使用了 `switch` 语句来根据传入的值判断应该添加哪些选项。你可以根据你自己的需求修改这个函数,添加你想要的选项。