内部html单选按钮数组值覆盖for循环

Question

I have written this code which should simply display the user's selection based on radio button clicked, There are multiple groups of radio buttons in the one form

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

My problem is

The value of the array radios[i].value gets over written as you can see in the image below

In this example cheifs and Stormers both needs to be displayed, since it was selected

If anyone can help me with correct implementation it would be very much appreciated

I created a fiddle at this link https://jsfiddle.net/taditdash/w8hpQ/

Answer 1

You can modify your JavaScript code like this:

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