问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
学渣冯
    8126

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

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

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

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

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

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

    javascripthtml
    阅读 10.6k
    4 个回答
    得票最新
    头像
    安歌
      7k1313
      ✓ 已被采纳

      这个应该就是你要的效果了，检查选项的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">
            <div class="radio" >
                <label>
                    <input onchange="setA()" type="radio" name="questionSelect" value="A" />A.
                    <span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
                </label>
            </div>

            <div class="radio">
                <label>
                      <input type="radio" name="questionSelect" value="B"/>B.
                      <span class="question-content">问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
                </label>
            </div>
         </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>
      头像
      jackple
        83522945

        检查checked属性
        $(this).prop(“checked”)

        头像
        mengdu
          2.2k104763

          遍历这个值Form1.questionSelect，找到Form1.questionSelect[i].checked为真的选项，然后获取值Form1.questionSelect[i].value

          头像
          Neonlite
            14128
              <form action="" class="select" name="Form1">
    <div class="radio">
      <label for="">
        <input type="radio" name="questionSelect" value="A" onclick="getValue()">A.
        <span class="question-content">问题问题问题</span>
      </label>
    </div>
    <div class="radio">
      <label for="">
        <input type="radio" name="questionSelect" value="B" onclick="getValue()">B.
        <span class="question-content">问题问题问题</span>
      </label>
    </div>
    <div class="radio">
      <label for="">
        <input type="radio" name="questionSelect" value="C" onclick="getValue()">C.
        <span class="question-content">问题问题问题</span>
      </label>
    </div>
    <div class="radio">
      <label for="">
        <input type="radio" name="questionSelect" value="D" onclick="getValue()">D.
        <span class="question-content">问题问题问题</span>
      </label>
    </div>
  </form>

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

  <script>
    function getValue() {
      var ansRadio = document.getElementsByName("questionSelect");
      var ansOrder = document.getElementById("answerOrder");
      for (i = 0; i < ansRadio.length; i++) {
        if (ansRadio[i].checked) {
          ansOrder.innerText = (ansRadio[i].value);
        }
      }
    };
  </script>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题