javascript - display the value of all selected radio buttons on a form -

i have multiple radio buttons generated in php loop looks this

while(){       <input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team1'].' " onclick="return disp()""><span>'.$team1.'</span>     <input type="radio" id="picks'.$x.'"  name="picks['.$x.']" value="'.$row['team2'].' "onclick="return disp()""><span>'.$team2.'</span>      <input type="radio" name="picks'.$x.'" value="draw" onclick="return disp()">  } 

what want do

display selected radio buttons in div on bottom of page

my code

var elmnts = document.getelementbyid("makepicksform").elements var lngth = document.getelementbyid("makepicksform").length; var div = document.getelementbyid("disppicks");  (var x = 0; x < lngth; x++) {     if (elmnts[x].type == "radio" && elmnts[x].checked == true) {         div.innerhtml = elmnts[x].value;     } } 

my problem

only value of first selected radio button displayed in div, other radio buttons ignored

my question

any idea how can modify javascript display values of selected radio buttons?

since you've tagged question jquery, here jquery solution. run snippet see work:

$(document).ready(function () {      $(':radio').change(function (e) {          //clear div          $('#disppicks').html('');          //update div          $(':radio:checked').each(function (ind, ele) {              $('#disppicks').append($(ele).val() + '<br/>');          });      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <input type="radio" name="foo" value="foo1" />  <input type="radio" name="foo" value="foo2" />  <input type="radio" name="foo" value="foo3" />  <br/>  <input type="radio" name="bar" value="bar1" />  <input type="radio" name="bar" value="bar2" />  <input type="radio" name="bar" value="bar3" />  <br/>  <input type="radio" name="wow" value="wow1" />  <input type="radio" name="wow" value="wow2" />  <input type="radio" name="wow" value="wow3" />  <div id="disppicks"></div>