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

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解决方案。运行代码段以查看其是否有效：

＆＃13;

＆＃13;

$(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/>');
        });
    });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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-Fiddle

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