js写一段radio切换的代码
时间: 2023-08-06 08:03:46 浏览: 158
以下是一个简单的示例代码:
HTML 代码:
```html
<label>
<input type="radio" name="color" value="red" checked> 红色
</label>
<label>
<input type="radio" name="color" value="green"> 绿色
</label>
<label>
<input type="radio" name="color" value="blue"> 蓝色
</label>
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
```
JavaScript 代码:
```js
const radios = document.querySelectorAll('input[type="radio"][name="color"]');
const box = document.getElementById('box');
radios.forEach((radio) => {
radio.addEventListener('change', () => {
box.style.backgroundColor = radio.value;
});
});
```
该代码创建了三个 radio 输入框,用于选择红、绿或蓝三种颜色。默认情况下,红色被选中。当用户点击其中一个 radio 输入框时,将更新一个名为“box”的 div 元素的背景颜色,以反映所选颜色。