更改javascript,选中复选框

时间:2011-02-28 09:59:15

标签: javascript checkbox

我有这个代码选择所有复选框:

<html>
<head>
<script language="javascript">
function checkAll(){
    for (var i=0;i<document.forms[0].elements.length;i++)
    {
        var e=document.forms[0].elements[i];
        if ((e.name != 'allbox') && (e.type=='checkbox'))
        {
            e.checked=document.forms[0].allbox.checked;
        }
    }
}
</script>
</head>

<body>
  <form>
    <input type="checkbox" value="on" name="allbox" onclick="checkAll();"/> Check all<br />
    <h3>Fruit</h3>
    <input type="checkbox" value="on" name="oranges" /> Oranges<br/>
    <input type="checkbox" value="on" name="bananas" /> Bananas<br/>
  </form>
</body>
</html>

在这种情况下,我应该如何改变(以及它如何改变逻辑)JavaScript?

<body>
    <form id="menu">
       <input type="checkbox" value="on" name="allbox" onclick="checkAll();"/> Check all<br />
    </form>
    <h3>Fruit</h3>
    <form id="select">
       <input type="checkbox" value="on" name="oranges" /> Oranges<br/>
       <input type="checkbox" value="on" name="bananas" /> Bananas<br/>
    </form>
</body>

2 个答案:

答案 0 :(得分:1)

第二个例子中有两种形式。

在JavaScript中,文档中包含所有表单的数组:document.forms

JavaScript中的数组从零开始,因此第一个表单使用forms[0]访问,第二个表单使用forms[1]访问。依次类推。

由于示例中的复选框位于第二个表单上,只需更改JavaScript即可访问第二种表单中的元素。

...
    for (var i=0;i<document.forms[1].elements.length;i++)
    {
        var e=document.forms[1].elements[i];
...

或者因为您的第二个表单有ID,您可以通过ID访问它:

...
for(var i=0;i<document.getElementById("select").elements.length;i++)
{
    var e=document.getElementById("select").elements[i];
...

答案 1 :(得分:0)

第二页上有两个表单,但您的脚本仅指一个表单。您不需要将表单分成两部分(从您现有的代码判断)。

但是如果你想保留两种形式,这是可能的。用脚本中的document.forms[0]替换document.forms[1]