獲取動態定義的，已選中的單選按鈕的屬性

Question

有類似問題的問題，但我仍然無法弄清楚。

我有一組單選按鈕，動態定義（按鈕的數量和標籤爲他們改變）。

我只需要獲取與選中的單選按鈕關聯的標籤和編號。我怎樣才能做到這一點？

我做了一個JS fiddle表明，當我點擊任何按鈕時，選中的收音機是「未定義的」。下面的代碼：

$(document).ready(function() { 
 
    var myArray = ["never", "sometimes", "always"]; 
 

 
    for (i = 0; i < myArray.length; i++) { 
 
    addradiobutton("radio", i + 1, label = myArray[i]); 
 
    } 
 

 
    function addradiobutton(type, number, text) { 
 
    var label = document.createElement("label"); 
 

 
    var element = document.createElement("input"); 
 
    //Assign different attributes to the element. 
 
    element.setAttribute("type", type); 
 
    element.setAttribute("value", number); 
 
    element.setAttribute("name", type); 
 
    element.setAttribute("id", "radio_" + number); 
 

 
    label.appendChild(element); 
 
    label.innerHTML += text; 
 

 
    var foo = document.getElementById("questionAnswerRadio"); 
 
    //Append the element in page (in span). 
 
    foo.appendChild(label); 
 
    } 
 

 
    $("#questionAnswerRadio").click(function(event) { 
 
    var currentSlideResult = 0; 
 
    currentSlideResult.answerChosen = $("#questionAnswerRadio :radio:checked + label").text(); 
 
    currentSlideResult.numberChosen = $("#questionAnswerRadio :radio:checked + value").text(); 
 
    alert(currentSlideResult.answerChosen) 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="questionAnswerRadio"></div>

Answer 1

1. 使用$(this)事件處理程序來獲取點擊的單選按鈕的值和標籤
2. 分配空對象變量currentSlideResult
3. 裏面得到與單選按鈕相關的標籤使用$(this).parent().text()
4. 使用change事件在電臺，而不是click
5. 您可以直接通過數組元素的功能，沒有必要將它分配給一個變量，然後傳遞變量
6. 要創建新的元素和附加元素，你可以使用jQuery

Demo

$(document).ready(function() { 
 
    var myArray = ["never", "sometimes", "always"]; 
 

 
    for (i = 0; i < myArray.length; i++) { 
 
    addradiobutton("radio", i + 1, myArray[i]); 
 
    } 
 

 
    function addradiobutton(type, number, text) { 
 
    var input = $('<input />') 
 
     .attr({ 
 
     type: type, 
 
     value: number, 
 
     name: type, 
 
     id: 'radio_' + number 
 
     }); 
 

 
    $('<label />') 
 
     .text(text) 
 
     .prepend(input) 
 
     .appendTo('#questionAnswerRadio'); 
 
    } 
 

 
    $("#questionAnswerRadio").on('change', ':radio', function(event) { 
 
    var currentSlideResult = {}; 
 
    currentSlideResult.answerChosen = $(this).parent().text(); 
 
    currentSlideResult.numberChosen = $(this).val(); 
 
    alert(currentSlideResult.answerChosen); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="questionAnswerRadio"></div>