角度单选框已显示已选中 - Javascript

本文将介绍如何在Javascript中实现角度单选框，并在选中时显示已选中状态。

实现步骤

1. 首先，我们需要在HTML中添加一个角度单选框，可以使用<input type="radio" name="angle" value="30">30°<br>格式定义单选框。
2. 在Javascript中，我们需要获取单选框元素，并为其添加点击事件监听器。
3. 点击事件监听器中，我们需要获取当前选中的单选框的值，并将其显示在页面中。

下面是实现角度单选框和选中状态显示的完整代码：

## HTML

<input type="radio" name="angle" value="30">30°<br>
<input type="radio" name="angle" value="45">45°<br>
<input type="radio" name="angle" value="60">60°<br>
<div id="message"></div>

## Javascript

const radios = document.getElementsByName('angle');
const message = document.getElementById('message');

radios.forEach(radio => {
  radio.addEventListener('click', () => {
    const value = radio.value;
    message.innerText = `已选中 ${value}°`;
  });
});

解释

• const radios = document.getElementsByName('angle'): 获取所有name为angle的单选框元素，返回的是一个NodeList对象。
• radios.forEach(...): 遍历所有单选框元素，并为每个元素添加点击事件监听器。
• const value = radio.value;: 获取当前选中的单选框的值。
• message.innerText = ...: 将消息显示在页面中，使用innerText属性实现。

总结

通过以上步骤，我们成功实现了角度单选框，并在选中时显示已选中状态。这是实现单选按钮的一种简单方法，可以应用于不同的场景。