javascript - 内部 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 都需要显示，因为它已被选中

如果有人能帮助我正确实现，将不胜感激

我在这个链接上创建了一个 fiddle 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; 
}