ฉันมีปัญหาบางอย่างกับโปรแกรม 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;

ทางออกที่ง่ายที่สุด:

 document.querySelector('input[name=genderS]: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 แต่มีรหัสความปลอดภัยเพื่อส่งคืนสตริงว่าง (และหลีกเลี่ยง a 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 พบควบคุมและ null / 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);

refrence: https://developer.mozilla.org/en-US/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");
   }    
}

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

คุณสามารถใช้Array Find the checkedproperty เพื่อค้นหารายการที่ตรวจสอบ:

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

ใช้จาวาสคริปต์ที่บริสุทธิ์คุณสามารถจัดการการอ้างอิงไปยังวัตถุที่ส่งเหตุการณ์

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

ให้สมมติว่าคุณต้องการวางแถวของปุ่มตัวเลือกต่าง ๆ ในแต่ละแบบมีชื่อแอตทริบิวต์แยกกัน ('option1', 'option2' ฯลฯ ) แต่ชื่อคลาสเดียวกัน บางทีคุณอาจต้องการพวกเขาในหลายแถวซึ่งแต่ละคนจะส่งค่าตามระดับ 1 ถึง 5 ที่เกี่ยวข้องกับคำถาม คุณสามารถเขียนจาวาสคริปต์ของคุณเช่น:

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

ฉันจะแทรกผลลัพธ์สุดท้ายลงในองค์ประกอบแบบฟอร์มที่ซ่อนอยู่เพื่อส่งพร้อมกับแบบฟอร์ม

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

หากคุณสามารถกำหนดรหัสสำหรับองค์ประกอบแบบฟอร์มของคุณ () ได้ด้วยวิธีนี้ถือได้ว่าเป็นทางเลือกที่ปลอดภัย (โดยเฉพาะอย่างยิ่งเมื่อชื่อองค์ประกอบกลุ่มวิทยุไม่ซ้ำกันในเอกสาร):

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

ฯลฯ จากนั้นใช้เพียง

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

หรือ

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

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