Tôi đang gặp một số vấn đề lạ với chương trình JS của mình. Tôi đã làm việc này đúng cách nhưng vì một số lý do nó không còn hoạt động. Tôi chỉ muốn tìm giá trị của nút radio (cái nào được chọn) và trả nó về một biến. Vì một số lý do, nó tiếp tục quay trở lại undefined.

Đây là mã của tôi:

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>

Bạn có thể làm một cái gì đó như thế này:

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

Chỉnh sửa: Cảm ơn HATCHA và jpsetung về các đề xuất chỉnh sửa của bạn.

Điều này làm việc với bất kỳ nhà thám hiểm.

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

Đây là một cách đơn giản để có được giá trị của bất kỳ loại đầu vào. Bạn cũng không cần bao gồm đường dẫn jQuery.

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

Kể từ jQuery 1.8, cú pháp chính xác cho truy vấn là

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

Không $('input[@name="genderS"]:checked').val();còn nữa, nó đã hoạt động trong jQuery 1.7 (với @ ).

Phiên bản ECMAScript 6

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

Giải pháp đơn giản nhất:

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

Thử cái này

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;
}

Một câu đố ở đây .

Chỉnh sửa: Như Chips_100 đã nói, bạn nên sử dụng:

var sizes = document.theForm[field];

trực tiếp mà không sử dụng biến kiểm tra.

Câu trả lời cũ:

Bạn có nên evalthích cái này không?

var sizes = eval(test);

Tôi không biết làm thế nào nó hoạt động, nhưng với tôi bạn chỉ sao chép một chuỗi.

Đây là JavaScript thuần túy, dựa trên câu trả lời của @Fontas nhưng với mã an toàn để trả về một chuỗi trống (và tránh a TypeError) nếu không có nút radio được chọn:

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

Mã bị hỏng như thế này:

• Dòng 1: lấy tham chiếu đến điều khiển (a) là một <input>loại, (b) có namethuộc tính genderSvà (c) được chọn.
• Dòng 2: Nếu có một điều khiển như vậy, trả về giá trị của nó. Nếu không, trả về một chuỗi trống. Các genderSRadiobiến là truthy nếu Line 1 phát hiện sự kiểm soát và null / falsey nếu nó không.

Đối với JQuery, hãy sử dụng câu trả lời của @ jbabey và lưu ý rằng nếu không có nút radio được chọn, nó sẽ trả về undefined.

Trong trường hợp ai đó đang tìm kiếm câu trả lời và hạ cánh ở đây như tôi, từ Chrome 34 và Firefox 33, bạn có thể làm như sau:

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

hoặc đơn giản hơn:

alert(document.theForm.genderS.value);

sự kết hợp: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Dưới đây là một ví dụ cho Radio nơi không sử dụng thuộc tính Checked = "đã kiểm tra"

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");
   }    
}

DEMO : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Nhấp Tìm mà không chọn bất kỳ Đài nào ]

Nguồn: http://bloggerplugnplay.blogspot.in/2013/01/validargetet-checked-radio-value-in.html

Đây là một cách hay để lấy giá trị của nút radio đã kiểm tra bằng JavaScript đơn giản:

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);

Nguồn: https://ultimatecferences.com/blog/get-value-checked-radio-buttons

Sử dụng HTML này:

<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>

Bạn cũng có thể sử dụng Array Find thuộc checkedtính để tìm mục đã kiểm tra:

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

Sử dụng một javascript thuần túy, bạn có thể xử lý tham chiếu đến đối tượng đã gửi sự kiện.

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

giả sử bạn cần đặt các hàng nút radio khác nhau trong một biểu mẫu, mỗi hàng có tên thuộc tính riêng biệt ('tùy chọn1', 'tùy chọn 2', v.v.) nhưng cùng tên lớp. Có lẽ bạn cần chúng trong nhiều hàng, mỗi hàng sẽ gửi một giá trị dựa trên thang điểm từ 1 đến 5 liên quan đến một câu hỏi. bạn có thể viết javascript của bạn như vậy:

<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>

Tôi cũng sẽ chèn đầu ra cuối cùng vào một phần tử biểu mẫu ẩn để được gửi cùng với biểu mẫu.

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

Nếu bạn có thể gán Id cho thành phần biểu mẫu của bạn (), cách này có thể được coi là một cách thay thế an toàn (đặc biệt khi tên thành phần nhóm radio không phải là duy nhất trong tài liệu):

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">

 <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"> 

vv sau đó sử dụng chỉ

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

Hoặc là

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

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