HTML 结构
首先，我们需要创建一个包含单选按钮的 html 结构。每个单选按钮都应具有相同的 name 属性，以便将它们归为一组。此外，每个单选按钮都应具有唯一的 value 属性，用于标识其对应的值。
Customize
在上面的代码中，我们添加了一个
元素，其 id 为 "details"。这个元素将用于显示选中的单选按钮的值。每个单选按钮都添加了 onclick 属性，该属性指定了一个名为 display 的 JavaScript 函数，并在点击时将单选按钮的 value 传递给该函数。
JavaScript 代码
接下来，我们需要编写 JavaScript 代码来获取选中的单选按钮的值，并将其显示在页面上。
function display(x){
document.getElementById('details').innerHTML = x;
}这段 JavaScript 代码定义了一个名为 display 的函数。该函数接受一个参数 x，该参数表示选中的单选按钮的值。该函数使用 document.getElementById 方法获取 id 为 "details" 的元素，并使用 innerHTML 属性将该元素的内容设置为 x。
完整示例
将 HTML 结构和 JavaScript 代码结合起来，我们可以得到一个完整的示例：
立即学习“Java免费学习笔记（深入）”；
Radio Button Example
Customize
在这个示例中，当用户点击任何一个单选按钮时，选中的值将显示在 id 为 "details" 的
元素中。
注意事项
- 确保每个单选按钮都具有唯一的 id 属性，以便可以使用 JavaScript 正确地获取它们。
- 确保所有单选按钮都具有相同的 name 属性，以便将它们归为一组。
- onclick 事件可以直接调用函数，也可以调用更复杂的逻辑。
总结
通过本文，您学习了如何使用 HTML 和 JavaScript 获取用户在单选按钮组中选择的值，并将其动态显示在网页上。这种技术可以用于各种场景，例如收集用户反馈、进行调查等。希望本文对您有所帮助！
