javascript - 怎么获取并在页面显示radio单选框的值？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 怎么获取并在页面显示radio单选框的值？

ringa_lee 2017-04-11 10:29:34

[JavaScript讨论组]

657

例如，一个表单 type=radio,有A B C D四个选项，当被单击选中一个选项时，怎么用js获取，并在页面显示出来？

<form action="" class="select" name="Form1">
    <p class="radio" >
        <label>
            <input type="radio" name="questionSelect" value="A" />A.
            <span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
        </label>
    </p>

    <p class="radio">
        <label>
              <input type="radio" name="questionSelect" value="B"/>B.
              <span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
        </label>
    </p>
 </form>
下面是C D

怎么用Js获取被选中的选项，并在一个span里面输出？如

<span>你的答案：</span><span id="answerOrder"></span>

JQuery也行，在网上找了一些代码都不能很好的实现，新手跪求帮助！Orz

ringa_lee

全部回复(3)

高洛峰2017-04-11 10:31:34 3楼

这个应该就是你要的效果了，检查选项的checked属性可以判断哪个选项被选中；通过onchange事件绑定即可

<!Doctype html>
    <head>
        <title>js练习</title>
        <meta charset="utf-8">
         <script src="jquery.min.js"></script>
    </head>
    <body>
        <form action="" class="select" name="Form1">
            <p class="radio" >
                <label>
                    <input onchange="setA()" type="radio" name="questionSelect" value="A" />A.
                    <span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
                </label>
            </p>

            <p class="radio">
                <label>
                      <input type="radio" name="questionSelect" value="B"/>B.
                      <span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
                </label>
            </p>
         </form>
         <span>你的答案：</span><span id="answerOrder"></span>
        
    </body>
    <script text="text/javascript">
    //给单选按钮绑定事件
     window.onload=function(){
        var ans = document.getElementsByName("questionSelect");
        for(var i=0;i<ans.length;i++){
            ans[i].onchange=setA;
       }

     }
    //当值改变时把当前选项呈现在指定区域
    function setA(){
         var ans = document.getElementsByName("questionSelect");
         var ord = document.getElementById("answerOrder");
         for(var i=0;i<ans.length;i++)
         if(ans[i].checked==true){
               ord.innerHTML=ans[i].value;
           }
         
 }
    </script>
</html>