如何获得所选单选按钮的值?

2020/10/07 14:41 · javascript ·  · 0评论

我的JS程序遇到一些奇怪的问题。我的工作正常,但由于某种原因,它不再工作。我只想查找单选按钮的值(已选中该按钮)并将其返回给变量。由于某种原因,它不断返回undefined

这是我的代码:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>

您可以执行以下操作:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++) {
  if (radios[i].checked) {
    // do whatever you want with the checked radio
    alert(radios[i].value);

    // only one radio can be logically checked, don't check the rest
    break;
  }
}
<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

编辑:感谢HATCHA和jpsetung的编辑建议。

这适用于任何资源管理器。

document.querySelector('input[name="genderS"]:checked').value;

这是获取任何输入类型的值的简单方法。也不需要包含jQuery路径。

document.forms.your-form-name.elements.radio-button-name.value

从jQuery 1.8开始,查询的正确语法是

$('input[name="genderS"]:checked').val();

现在已经$('input[@name="genderS"]:checked').val();不行了,它已经在jQuery 1.7中运行了(带有@)。

ECMAScript 6版本

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;

尝试这个

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

小提琴在这里

编辑:如Chips_100所说,您应该使用:

var sizes = document.theForm[field];

直接使用测试变量。


旧答案:

你不eval喜欢这个吗?

var sizes = eval(test);

我不知道它是如何工作的,但是对我来说,您只是在复制一个字符串。

这是纯JavaScript,基于@Fontas的回答,但带有安全代码,TypeError如果没有选中的单选按钮,则返回一个空字符串(并避免使用):

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

代码分解如下:

  • 第1行:获得对以下控件的引用:(a)是<input>类型,(b)具有name属性genderS,并且(c)被检查。
  • 第2行:如果存在此类控件,则返回其值。如果没有,则返回一个空字符串。genderSRadio变量是truthy如果第1行的发现控制和空/ falsey如果它没有。

对于JQuery,请使用@jbabey的答案,请注意,如果没有选中的单选按钮,它将返回undefined

如果有人在寻找答案并像我一样降落在这里,可以从Chrome 34和Firefox 33中执行以下操作:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

或更简单:

alert(document.theForm.genderS.value);

参考:https : //developer.mozilla.org/zh-CN/docs/Web/API/RadioNodeList/value

这是不使用Checked =“ checked”属性的收音机示例

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

演示http : //jsfiddle.net/ipsjolly/hgdWp/2/ [单击查找而不选择任何收音机]

来源:http : //bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

这是一种使用普通JavaScript获取选中的单选按钮的值的好方法:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

资料来源:https : //ultimatecourses.com/blog/get-value-checked-radio-buttons

使用此HTML:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

你也可以使用数组查找checked属性来找到检查项目:

Array.from(form.elements.characters).find(radio => radio.checked);

使用纯JavaScript,您可以处理对调度事件的对象的引用。

function (event) {
    console.log(event.target.value);
}

让我们假设您需要在表单中放置单选按钮的不同行,每个单选按钮具有单独的属性名称('option1','option2'等),但具有相同的类名。也许您需要它们在多行中,它们将分别基于与问题相关的1到5的小数位提交一个值。您可以这样编写JavaScript:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

我还将最终输出插入到一个隐藏的表单元素中,与表单一起提交。

如果可以为表单element()分配ID,则可以将这种方法视为安全的替代方法(特别是当单选组元素名称在文档中不唯一时):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML:

<form action="#n" name="theForm" id="yourFormId">
 document.querySelector('input[name=genderS]:checked').value

我喜欢使用方括号从输入中获取价值,这种方式比使用点更清晰。

document.forms['form_name']['input_name'].value;
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

等然后使用

  $("#rdbExamples:checked").val()

要么

   $('input[name="rdbExampleInfo"]:checked').val();
    var value = $('input:radio[name="radiogroupname"]:checked').val();
本文地址:http://javascript.askforanswer.com/ruhehuodesuoxuandanxuananniudezhi-2.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!