显示表单上所有选定单选按钮的值

Question

我在php循环中生成了多个单选按钮，看起来像这样

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()">

}

我想做的事

在页面底部的div中显示所有选中的单选按钮

我的密码

var elmnts = document.getElementById("makePicksForm").elements
var lngth = document.getElementById("makePicksForm").length;
var div = document.getElementById("dispPicks");

for (var x = 0; x < lngth; x++) {
    if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
        div.innerHTML = elmnts[x].value;
    }
}

我的问题

div中仅显示第一个选定单选按钮的值，其他单选按钮将被忽略

我的问题

知道如何修改JavaScript以显示所有选定单选按钮的值吗？

Answer 1

由于您已使用jQuery标记了问题，因此这里提供了jQuery解决方案。 运行代码片段以查看其工作原理：

 $(document).ready(function () { $(':radio').change(function (e) { //clear the div $('#dispPicks').html(''); //update the 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> 

Answer 2

您在for循环中使用了lngth ，但这是通过按ID获取元素（仅应为1个元素）来定义的。 这样循环只会运行一次...

假设ID为makePicksForm的元素包含所有单选按钮，则需要获取元素的长度：

var elmnts = document.getElementById("makePicksForm").elements;
var div = document.getElementById("dispPicks");

for (var x = 0; x < elmnts.length; x++) {
    if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
        div.innerHTML += elmnts[x].value;
    }
}

另外，您需要使用+=将值添加到innerHTML属性中

附带说明：您的PHP循环正在创建重复的ID，如果您需要引用这些元素，则会导致JavaScript代码失败...

Answer 3

另一个jQuery小提琴

<input type="radio" id="bob" name="boys" value="Bob"><label for="bob">Bob</label><br>
<input type="radio" id="jim" name="boys" value="Jim"><label for="jim">Jim</label><br>
<input type="radio" id="pete" name="boys" value="Pete"><label for="pete">Pete</label><br>
<input type="radio" id="mary" name="girls" value="Mary"><label for="mary">Mary</label><br>
<input type="radio" id="jane" name="girls" value="Jane"><label for="jane">Jane</label><br>
<input type="radio" id="susan" name="girls" value="Susan"><label for="susan">Susan</label>

<h3><span id="boy">?</span> and <span id="girl">?</span></h3>

$("input[name=boys]").click(function () {
    $("#boy").text($(this).val());
});

$("input[name=girls]").click(function () {
    $("#girl").text($(this).val());
});