Question

我正在构建一个向导作为学习项目，我希望在最后一页的整个向导中检查所有单选按钮的摘要...我是通过数组做到的吗？如果是这样，如何将每个单选按钮值添加到数组，然后将其记录到摘要页面？有没有其他方法可以做到这一点？请帮忙。

Answer 1

这是一个例子，希望它或多或少地符合你的需要：

<强> 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 :(原生）

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

Answer 2

有多种方法，我建议单页网页架构，并在应用程序范围级别保存所有表单数据（单选按钮/或任何其他数据），以便您可以在摘要页面中访问它。

单选按钮值添加到数组？

2 个答案: