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

Question

不确定为什么这个功能不会启动。检查过，在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') }
        }

    }

完成。谢谢你的帮助

Answer 1

你的脚本几乎没问题，只需使用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>

Answer 2

document.getElementsByTagName函数返回所有DOM元素的数组，其标记名称等于给定参数（例如input，div等）。如果您想按name attribute选择元素，则应使用document.getElementsByName代替。

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

---

  

document.getElementsByName

     

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

     

document.getElementsByTagName

     

返回具有给定标记名称的元素的HTMLCollection。该   搜索完整文档，包括根节点。归来了   HTMLCollection是实时的，这意味着它会自动更新   与DOM树保持同步而不必打电话   document.getElementsByTagName再次。

Answer 3

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'?">

Answer 4

更改行var var selectedPica = document.getElementsByTagName（'pica'）; to selectedPica = document.getElementsByName（'pica'）;

Answer 5

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

替换为：

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

请参阅DEMO