循环通过单选按钮，功能不起作用

loop through radio button, function doesnt work

本文关键字：功能 不起作用 单选按钮 循环      更新时间：2023-09-26

不知道为什么这个函数无法启动。检查了一下，在SO上读了很多，什么都没有...我敢肯定，在某个地方有非常小的错误，我无法发现的地方。

<form id="order">
    <table>
        <tr>
            <td>
                What type of pica would you like?<br>
                Vegetarian, £6.50 <input type="radio" name="pica" onclick="calcul();" value="vegetarian"><br>
                Meat Lover, £7.20 <input type="radio" name="pica" onclick="calcul();" value="meatLover"><br>
                Hawaian, £5.5 <input type="radio" name="pica" onclick="calcul();" value="hawaian">
                <br><br>
            </td>
        </tr>
    </table>
</form>
var picaPrice = new Array();
    picaPrice['vegetarian']=6.5;
    picaPrice['meatLover']=7.2;
    picaPrice['hawaian']=5.5;
    function calcul(){
        var pprice = 0;
        var selectedPica = document.getElementsByName('pica');
        for(var i=0; i<selectedPica.length; i++){
            if(selectedPica[i].checked) {
                alert('selected');
            }
            else { alert('not selected') }
        }
    }

做。谢谢你的帮助

document.getElementsByTagName 函数返回一个包含所有 DOM 元素的数组，这些元素的标签名等于给定的参数（如 input 、 div 等）。如果要按元素name attribute选择元素，则应改用document.getElementsByName。

var selectedPica = document.getElementsByName('pica');
<小时 />

document.getElementsByName

返回 （X）HTML 文档中具有给定名称的元素列表。

document.getElementsByTagName

返回具有给定标记名称的元素的 HTML 查询。这搜索完整的文档，包括根节点。返回的HTMLCollection是实时的，这意味着它会自动更新自己与 DOM 树保持同步，而无需调用document.getElementsByTagName 再次。

你的脚本几乎没问题，只需使用 getElementsByName 代替......如前所述，ByTagName。

var picaPrice = new Array();
picaPrice['vegetarian']=6.5;
picaPrice['meatLover']=7.2;
picaPrice['hawaian']=5.5;

function calcul(){
    var pprice = 0;
    var selectedPica = document.getElementsByName('pica');
    var res = document.getElementById('result').value;
    for(var i=0; i<selectedPica.length; i++){
        if(selectedPica[i].checked) {
            alert('selected');
        }
        else { alert('not selected') }
    }
}

此外，脚本还会引用结果项。您的 html 标记不提供此功能，只需添加一个带有 id="result"的div...

<form id="order">
<table>
    <tr>
        <td>
            What type of pica would you like?<br>
            Vegetarian, £6.50 
            <input type="radio" name="pica" onclick="calcul();" value="vegetarian"><br>
            Meat Lover, £7.20 <input type="radio" name="pica" onclick="calcul();" value="meatLover"><br>
            Hawaian, £5.5 <input type="radio" name="pica" onclick="calcul();" value="hawaian">
            <br><br>
        </td>
                <td><div id="result"></div>
    </tr>
</table>


var selectedPica = document.getElementsByTagName('pica');

getElementsByTagName 不是这样工作的。

例：

 <script>
    function getElements()
      {
      var x=document.getElementsByTagName("input");
      alert(x.length);
      }
    </script>
    <input type="text" size="20"><br>
    <input type="text" size="20"><br>
    <input type="text" size="20"><br><br>
    <input type="button" onclick="getElements()" value="How many input elements?">

您正在寻找的是getElementsByName

function getElements()
{
var x=document.getElementsByName("x");
alert(x.length);
}
</script>
Cats:
<input name="x" type="radio" value="Cats">
Dogs:
<input name="x" type="radio" value="Dogs">
<input type="button" onclick="getElements()" value="How many elements named 'x'?">
更改行 var var selectedPica = document.getElementsByTagName（'pica'）;

to selectedPica = document.getElementsByName（'pica'）;

<form id="order" name="orderForm">
 var selectedPica = document.getElementsByTagName('pica');

替换为：

var selectedPica = document.forms['orderForm'].elements['pica'];

查看演示

相关文章：