Javascript 显示窗体上所有选定单选按钮的值

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

}

while（）{
“.$2。”
}

我想做什么

在页面底部的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;
    }
}

var-elmnts=document.getElementById（“makePicksForm”）.elements
var lngth=document.getElementById（“makePicksForm”）.length；
var div=document.getElementById（“dispPicks”）；
对于（变量x=0；x

我的问题

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

我的问题

---

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

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

var-elmnts=document.getElementById（“makePicksForm”）.elements；
var div=document.getElementById（“dispPicks”）；
对于（var x=0；x

此外，还需要使用

+=

---

作为旁注：您的PHP循环正在创建重复的ID，如果您需要引用元素，这将导致javascript代码失败…

您在for循环中使用的是

lngth

，但这是通过按ID获取元素定义的，该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;
    }
}

var-elmnts=document.getElementById（“makePicksForm”）.elements；
var div=document.getElementById（“dispPicks”）；
对于（var x=0；x

此外，还需要使用

+=

---

作为旁注：您的PHP循环正在创建重复的ID，如果您需要引用元素，这将导致javascript代码失败…

因为您已经用jQuery标记了您的问题，下面是一个jQuery解决方案。运行代码段以查看其工作情况：

$（文档）.ready（函数（）{
$（':radio'）。更改（函数（e）{
//清除分区
$（'#dispPicks'）.html（''）；
//更新div
$（'：radio:checked'）。每个（函数（ind，ele）{
$（'#dispPicks'）.append（$（ele.val（）+'
'）；
});
});
});





既然您已经用jQuery标记了您的问题，下面是一个jQuery解决方案。运行代码段以查看其工作情况：


$（文档）.ready（函数（）{
$（':radio'）。更改（函数（e）{
//清除分区
$（'#dispPicks'）.html（''）；
//更新div
$（'：radio:checked'）。每个（函数（ind，ele）{
$（'#dispPicks'）.append（$（ele.val（）+'
'）；
});
});
});





另一个

Bob

吉姆

皮特

玛丽

简

苏珊
? 然后呢？
$（“输入[name=boys]”。单击（函数（）{
$（“#boy”）.text（$（this.val（））；
});
$（“输入[name=girls]”。单击（函数（）{
$（“#girl”）.text（$（this.val（））；
});
另一个

Bob

吉姆

皮特

玛丽

简

苏珊
? 然后呢？
$（“输入[name=boys]”。单击（函数（）{
$（“#boy”）.text（$（this.val（））；
});
$（“输入[name=girls]”。单击（函数（）{
$（“#girl”）.text（$（this.val（））；
});
我想您需要复选框。单选按钮设计为只允许在一个组中选择1个。注意：您的PHP循环会创建重复的ID。这可能会在某些情况下导致javascript失败point@KhanhTO整个要点是只允许在一个组中选择1个，您不能选择超过1个winnerI，我猜您需要复选框。单选按钮设计为只允许在一个组中选择1个。注意：您的PHP循环会创建重复的ID。这可能会在某些情况下导致javascript失败point@KhanhTO关键是在一个组中只允许选择1个，您不能选择超过1个winnerThanks Ted，但它不起作用，删除小提琴中的checked属性，当我选择一个单选按钮时，不会显示任何值…@TimothyCoetzee我更新了我的答案，并将代码片段包含在这里。运行它看看它的工作。非常感谢你，你不知道我有多感激这一点。感谢you@TimothyCoetzee很高兴提供帮助：）谢谢Ted，但它不起作用，请删除小提琴中的checked属性，当我选择一个单选按钮时，不会显示任何值…@TimothyCoetzee我更新了我的答案，并将片段包含在这里。运行它看看它的工作。非常感谢你，你不知道我有多感激这一点。感谢you@TimothyCoetzee很高兴提供帮助：）这导致了与我相同的问题，仅显示1个选择！当用户移动到下一组单选按钮时，上一个选择将被新的选择覆盖，而不是附加它…我已经给了您一个向上投票的机会，尽管如此，您需要使用+=，将值添加到innerHTML。我更新了我的示例这导致了与我相同的问题，只显示1个选择！当用户移动到下一组单选按钮时，上一个选择将被新的选择覆盖，而不是附加它…我已经给了您一个向上投票的机会，尽管如此，您需要使用+=，将值添加到innerHTML。我更新了我的考试