如何獲得選定的單選按鈕值？

Question

我試圖獲取所選單選按鈕的值，以便可以使用Ajax提交表單，但我在此處搜索了一些幫助，但找不到任何有用的解決方案

<input type="radio" id="answer" name="answer<?php echo $function::escape_string($question_row->question_id); ?>"
                         value="<?php echo $function::escape_string($answer_row>answer_id); ?>"/> 

-HTML輸出

<input type="radio" id="answer" name="answer16" value="107"/>

<input type="radio" id="answer" name="answer17" value="109"/>

<input type="radio" id="answer" name="answer15" value="104"/>

我在這里找到了這個功能

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;

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

var radioinputs = findSelection("answer");  

但是我不知道要更改什么，因此我可以使其正常工作

Answer 1

從它的外觀來看，您具有動態name字段，即name="answer2" ， name="answer3"等。因此，您的查詢document.getElementByName(field)將找不到與"answer"匹配的字段。

為了解決這個問題，或者擺脫動態name或者如果您真的需要它，那么我想說，向所有那些單選按鈕添加一個class ，並使用document.getElemenetsByClassName 。

Answer 2

您可以這樣構造：

 function findSelection(field) { var test = document.getElementsByClassName(field); var sizes = test.length; //alert("Size is " + sizes); result = []; // result[16]=107; // result[17]=109; // result[15]=104; for (i=0; i < sizes; i++) { var index = test[i].dataset.index; if(test[i].checked == true){ result[index] = test[i].value; }else{ result[index] = undefined; // for a answer doesn't have a value } } return result; } function checkfunction(){ var radioinputs = findSelection("radioanswer"); console.log(radioinputs); console.log(radioinputs[15]); }; 

 <form id="form1"> <input type="radio" class="radioanswer" name="answer16" data-index="16" value="107"/> <input type="radio" class="radioanswer" name="answer17" data-index="17" value="109"/> <input type="radio" class="radioanswer" name="answer15" data-index="15" value="104"/> <button type="button" onclick="checkfunction();"> Check </button> </form> 

一個類可以有多個實例，但id只有一個！ 您可以在此處查看有關數據屬性的文檔： https : //developer.mozilla.org/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes