添加到數組中的單選按鈕值？

Question

我正在構建一個嚮導作爲學習項目，我希望對整個嚮導中最後一頁中檢查的所有單選按鈕進行總結......我是否通過數組來完成此操作？如果是這樣，我如何將每個單選按鈕值添加到數組，然後將其記錄到摘要頁面？還有另一種方法可以做到這一點嗎？請幫忙。

Answer 1

有多種方式，我會建議單頁網頁架構，並在應用程序級別保存所有表單數據（單選按鈕/或任何其他數據），以便您可以在摘要頁面中訪問它。

Answer 2

下面是一個例子，希望這或多或少給你所需要的：

HTML

//First HTML DIV 
<div> 
    <input type="radio" name="image_size" value="100x100"> 100x100<br> 
    <input type="radio" name="image_size" value="200x200"> 200x200<br> 
    <input type="radio" name="image_size" value="500x500"> 500x500<br> 
    <input type="button" value="Next" id="Next_ImageSize" /> 
</div> 
//Second HTML DIV 
<div> 
    <input type="radio" name="image_color" value="blue"> blue<br> 
    <input type="radio" name="image_color" value="green"> green<br> 
    <input type="radio" name="image_color" value="yellow"> yellow<br> 
    <input type="button" value="Next" id="Next_ImageColor" /> 
</div> 
//Summary HTML DIV 
<div> 
    <h1>Summary</h1> 
    <p id="values"><p> 
</div> 

JAVASCRIPT：（使用jQuery庫）

var _SummaryArr = []; //empty array 
var _SummaryObj = []; //empty array (used for array of objects) 

//Add the selected radio button to the array 
$("[name='image_size']").change(function() { 
    _SummaryArr[0] = $(this).val(); //Index 0 for the first div 
    console.log(_SummaryArr[0]); //log to see the result 
}); 
//Add the selected radio button to the array 
$("[name='image_color']").change(function() { 
    _SummaryArr[1] = $(this).val(); //Index 1 for the second div 
    console.log(_SummaryArr[1]); //log to see the result 
}); 



//Add the selected radio button to the array 
$("[name='image_size']").change(function() { 
    _SummaryObj[0] = { "image_size" : $(this).val() }; //Index 0 for the first div 
    console.log(_SummaryObj[0]); //log to see the result 
}); 

//Adding the values to the summary using array 
for (var i = 0; i < _SummaryArr.length; i++) { 
    if (i == 0) 
     $("#values").html("<span>Image size: " + _SummaryArr[i] + "</span>"); 

    if (i == 1) 
     $("#values").html("<span>Image color: " + _SummaryArr[i] + "</span>"); 
} 
//Adding the values to the summary using object array 
for (var i = 0; i < _SummaryObj.length; i++) { 
    if (i == 0) 
     $("#values").html("<span>Image size: " + _SummaryObj[i].image_size + "</span>"); 

} 

JAVASCRIPT：（Native）

//Get all the radio button elements by name 
var rad = document.getElementsByName('image_size'); 

//Iterate through all the buttons and assign click event listener 
for(var i = 0; i < rad.length; i++) { 
    rad[i].onclick = function() { 
     _SummaryObj[0] = {"image_size":this.value}; //for the first div 
     //or 
     //_SummaryObj.push({"image_size":this.value}); 
    }; 
} 

for (var i = 0; i < _SummaryObj.length; i++) { 
    if (i == 0) //simple check to assign the name (this can easily be replaced by some dynamic function) 
     document.getElementById("values").innerHTML = "Image size:" + _SummaryObj[i].image_size; 
}