内部html单选按钮数组值重写为for循环

Question

我编写了这段代码，只需根据点击的单选按钮显示用户的选择，一种形式有多组单选按钮

<form name="makePicks">
    <label class="green">
        <input type="radio" id="x" onclick="handleClick()" name="picks1" value="Chiefs"><span>Chiefs</span>

        </label>
        <label class="yellow">
            <input type="radio" onclick="handleClick()" name="picks1" value="Hurricanes"><span>'Hurricanes'</span>

        </label>
        <label class="pink">
            <input type="radio" name="picks1" value="draw" onclick="handleClick()"><span>Draw</span>

        </label>
        <br />
        <label class="green">
            <input type="radio" id="x" onclick="handleClick()" name="picks2" value="Lions"><span>Lions</span>

        </label>
        <label class="yellow">
            <input type="radio" onclick="handleClick()" name="picks2" value="Stormers"><span>'Stormers'</span>

        </label>
        <label class="pink">
            <input type="radio" name="picks2" value="draw" onclick="handleClick()"><span>Draw</span>

        </label>
        <br />
    </form>
    <div id="dispPicks">
            </div>

function handleClick() {
    // Get all the inputs.
    var inputs = makePicks.elements;
    var radios = [];

    //Loop and find only the Radios
    for (var i = 0; i < inputs.length; ++i) {
        if (inputs[i].type == 'radio') {
            radios.push(inputs[i]);
        }
    }

    //var found = 1;
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
             document.getElementById("dispPicks").innerHTML="YOU HAVE SELECTED "+radios[i].value
            //found = 0;
            //break;
        }
    }
    //if (found == 1) {
        //alert("Please Select Radio");
        //}
        //event.preventDefault(); // disable normal form submit behavior
        return false; 
    }

我的问题是

如下图所示，数组radios[i].value的值已被覆盖

在这个例子中，cheifs和Stormers都需要显示，因为它已被选中

如果有人能帮助我正确实施，我们将非常感激

我在这个链接上创建了一个小提琴https://jsfiddle.net/taditdash/w8hpQ/

Answer 1

您可以像这样修改JavaScript代码：

function handleClick() {
    // Get all the inputs.
    var inputs = makePicks.elements;
    var radios = [];

    //Loop and find only the Radios
    for (var i = 0; i < inputs.length; ++i) {
        if (inputs[i].type == 'radio') {
            radios.push(inputs[i]);
        }
    }

    myradiovalue = "";

    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            if (myradiovalue=="")
                myradiovalue=radios[i].value
            else
                myradiovalue=myradiovalue+ ", " +radios[i].value    
        }
    }

    document.getElementById("dispPicks").innerHTML = "YOU HAVE SELECTED " + myradiovalue;
    return false; 
}