如何使用 HTML/JavaScript 保存单选按钮的输入并显示-html教程-PHP中文网

如何使用 HTML/JavaScript 保存单选按钮的输入并显示

DDD

发布： 2025-09-26 15:51:18

原创

202人浏览过

如何使用 HTML/JavaScript 保存单选按钮的输入并显示

本文将介绍如何使用 HTML 和 JavaScript 获取用户在单选按钮组中选择的值，并将其动态显示在网页上。通过监听单选按钮的点击事件，获取选中的值，并使用 JavaScript 更新页面元素的内容，实现实时显示用户选择的功能。

HTML 结构

首先，我们需要创建一个包含单选按钮的 html 结构。每个单选按钮都应具有相同的 name 属性，以便将它们归为一组。此外，每个单选按钮都应具有唯一的 value 属性，用于标识其对应的值。

<p id="details"></p>

<div class='input-form' id="div1">
    <h4 id="myText" contenteditable="true">Customize</h4>
    <input type="radio" name="rating" value="5" id="a5" onclick="display(this.value)"><label for="5">5</label>
    <input type="radio" name="rating" value="4" id="a4" onclick="display(this.value)"><label for="4">4</label>
    <input type="radio" name="rating" value="3" id="a3" onclick="display(this.value)"><label for="3">3</label>
    <input type="radio" name="rating" value="2" id="a2" onclick="display(this.value)"><label for="2">2</label>
    <input type="radio" name="rating" value="1" id="a1" onclick="display(this.value)"><label for="1">1</label>
</div>
<button type='button' id='but_add' value='Add new'>Add Rating Nums</button>

登录后复制

在上面的代码中，我们添加了一个 <p> 元素，其 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免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
    <title>Radio Button Example</title>
</head>
<body>

<p id="details"></p>

<div class='input-form' id="div1">
    <h4 id="myText" contenteditable="true">Customize</h4>
    <input type="radio" name="rating" value="5" id="a5" onclick="display(this.value)"><label for="5">5</label>
    <input type="radio" name="rating" value="4" id="a4" onclick="display(this.value)"><label for="4">4</label>
    <input type="radio" name="rating" value="3" id="a3" onclick="display(this.value)"><label for="3">3</label>
    <input type="radio" name="rating" value="2" id="a2" onclick="display(this.value)"><label for="2">2</label>
    <input type="radio" name="rating" value="1" id="a1" onclick="display(this.value)"><label for="1">1</label>
</div>
<button type='button' id='but_add' value='Add new'>Add Rating Nums</button>

<script>
function display(x){
    document.getElementById('details').innerHTML = x;
}
</script>

</body>
</html>

登录后复制

在这个示例中，当用户点击任何一个单选按钮时，选中的值将显示在 id 为 "details" 的 <p> 元素中。