【问题标题】:javascript get value of html radio button input selected [duplicate]javascript获取选定的html单选按钮输入的值[重复]
【发布时间】:2016-09-20 00:52:12
【问题描述】:

我有一个像这样的简单表格:

<form id="formSearch">
<label><input type="radio" name="number" value="1">singular</label><br>
<label><input type="radio" name="number" value="2">plural</label><br><br>
<INPUT type="Submit" Value="Show" name="show" ></INPUT>
</form>

我想用 javascript 获取所选按钮的“radio-value”:

var account = document.getElementsByName("number").value;

不要给出正确的答案。如果我给一个陷阱:

alert(account);

结果是:未定义。 不知道伤害在哪里,有谁愿意帮助我,谢谢

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:

    使用javascript:

    document.querySelector('[name=number]:checked').value;
    

    【讨论】:

      【解决方案2】:

      在 jquery 中,您可以使用选中的属性选择器

      $("[name='number']:checked").val()
      

      【讨论】:

        【解决方案3】:

        function test() {
          
          var checkedRadioBtnList=new Array();
          
          var account = document.getElementsByName("number");
          
          for(i=0; i<account.length;i++){  
            if(account[i].checked){      
              checkedRadioBtnList.push({value:account[i].value});
            }    
          }
          
          console.log(checkedRadioBtnList);
        }
        <form id="formSearch">
        <label><input type="radio" name="number" value="1">singular</label><br>
        <label><input type="radio" name="number" value="2">plural</label><br><br>
        <INPUT type="Submit" Value="Show" name="show" onclick="test()" ></INPUT>
        </form>

        getElementsByName 将返回一个数组。

        编辑

        我只是简单地回答了这个问题,如何使用javascript 获取检查值。

        有很多选项可以根据应用程序存储值。我已经改进了我的答案,使用JSON Objectchecked 单选按钮值存储在Array 中。

        【讨论】:

        • 但是你怎么知道选择了哪个元素呢?简单地访问第一个收音机不是解决方案。
        • @RoryMcCrossan 检查我更新的答案。
        • 如果我选择复数,则警报为 false。
        • @Jitendra Tiwari :如果只有两个选择(单数和复数),这种方式是正确的,如果有两个以上的选择呢?
        • @Jai,@agus 我已经更新了我的答案。请查看我对EDIT 部分的评论。
        猜你喜欢
        • 2016-06-02
        • 2017-12-20
        • 2016-07-13
        • 2020-07-04
        • 2020-08-19
        • 2017-01-30
        • 2016-08-30
        • 2010-12-04
        • 1970-01-01
        相关资源
        最近更新 更多