Get Radio Button Value with Javascript

问题:

I'm having some strange problem with my JS program. I had this working properly but for some reason it's no longer working. I just want to find the value of the radio button (which one is selected) and return it to a variable. For some reason it keeps returning undefined. Here is my code:

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

submitForm:

function submitForm() {      var genderS =  findSelection("genderS");     alert(genderS); } 

HTML:

      Gender:       Male      Female

Search 
 

回答1:

JavaScript:

var radios = document.getElementsByName('genderS');  for (var i = 0, length = radios.length; i 

http://jsfiddle.net/Xxxd3/610/

Edit: Thanks HATCHA and jpsetung for your edit suggestions.

回答2:

This works with any explorer.

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

It is the purest way to get the value of any input type. You do not need to include jQuery in your path as well.

回答3:

Since jQuery 1.8, the correct syntax for the query is

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

Not $('input[@name="genderS"]:checked').val(); anymore, which was working in jQuery 1.7 (with the @).

回答4:

The simplest solution:

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

回答5:

Try this

function findSelection(field) {     var test = document.getElementsByName(field);     var sizes = test.length;     alert(sizes);     for (i=0; i 

A fiddle here.

回答6:

Edit: As said by Chips_100 you should use :

var sizes = document.theForm[field]; 

directly without using the test variable.

---

Old answer:

Shouldn't you eval like this ?

var sizes = eval(test); 

I don't know how that works, but to me you're only copying a string.

回答7:

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

回答8:

ECMAScript 6 version

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

回答9:

This is pure JavaScript, based on the answer by @Fontas but with safety code to return an empty string (and avoid a TypeError) if there isn't a selected radio button:

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

The code breaks down like this:

• Line 1: get a reference to the control that (a) is an type, (b) has a name attribute of genderS, and (c) is checked.
• Line 2: If there is such a control, return its value. If there isn't, return an empty string. The genderSRadio variable is truthy if Line 1 finds the control and null/falsey if it doesn't.

For JQuery, use @jbabey's answer, and note that if there isn't a selected radio button it will return undefined.

回答10:

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

回答11:

Here is an Example for Radios where no Checked="checked" attribute is used

function test() { var radios = document.getElementsByName("radiotest"); var found = 1; for (var i = 0; i 

DEMO : http://jsfiddle.net/ipsjolly/hgdWp/2/ [Click Find without selecting any Radio]

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

回答12:

In case someone was looking for an answer and landed here like me, from Chrome 34 and Firefox 33 you can do the following:

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

or simpler:

alert(document.theForm.genderS.value); 

refrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

回答13:

Using a pure javascript, you can handle the reference to the object that dispatched the event.

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

回答14:

If it is possible for you to assign a Id for your form element(), this way can be considered as a safe alternative way (specially when radio group element name is not unique in document):

function findSelection(field) {     var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");     alert(formInputElements);         for (i=0; i 

HTML:

回答15:

lets suppose you need to place different rows of radio buttons in a form, each with separate attribute names ('option1','option2' etc) but the same class name. Perhaps you need them in multiple rows where they will each submit a value based on a scale of 1 to 5 pertaining to a question. you can write your javascript like so:

I would also insert the final output into a hidden form element to be submitted together with the form.

回答16:

etc then use just

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

Or

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

回答17:

    var value = $('input:radio[name="radiogroupname"]:checked').val(); 

文章来源: Get Radio Button Value with Javascript