JavaScript 使用单选按钮更改屏幕上的值

在网页开发中，经常需要使用单选按钮来进行选项的选择，而使用 JavaScript 可以轻松实现在单选按钮被选中时，屏幕上的值随之更改的效果。

基本思路

1. 获取单选按钮元素
2. 给单选按钮元素添加事件监听器
3. 在事件监听器中设置屏幕上的值

代码实现

HTML

在 HTML 中，需要添加单选按钮元素和用于显示目标值的元素。

<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options" value="Option 1">

<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options" value="Option 2">

<div id="output">Output: </div>

JavaScript

在 JavaScript 中，需要先获取单选按钮元素和用于显示目标值的元素。

const option1 = document.getElementById('option1');
const option2 = document.getElementById('option2');
const output = document.getElementById('output');

然后，可以给单选按钮元素添加事件监听器，以在按钮被选中时触发更改屏幕上的值。

option1.addEventListener('change', () => {
  output.textContent = `Output: ${option1.value}`;
});

option2.addEventListener('change', () => {
  output.textContent = `Output: ${option2.value}`;
});

在事件监听器中，可以根据被选中的单选按钮的值来更改屏幕上的值。此处使用 textContent 属性将文本内容更改为目标值。

完整代码

<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options" value="Option 1">

<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options" value="Option 2">

<div id="output">Output: </div>

<script>
  const option1 = document.getElementById('option1');
  const option2 = document.getElementById('option2');
  const output = document.getElementById('output');

  option1.addEventListener('change', () => {
    output.textContent = `Output: ${option1.value}`;
  });

  option2.addEventListener('change', () => {
    output.textContent = `Output: ${option2.value}`;
  });
</script>

以上就是使用 JavaScript 实现在单选按钮被选中时更改屏幕上的值的介绍。