更改 javascript，选中复选框答案

【问题标题】：Altering javascript, select check boxes更改 javascript，选中复选框
【发布时间】：2011-02-28 09:59:14
【问题描述】：

我有这个选择所有复选框的代码：

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

【问题讨论】：

标签： javascript checkbox

【解决方案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];
...

【讨论】：

是否可以通过 id 或 class 或其他我可以设置的东西来引用 form[1] 以便改变位置它仍然可以工作？
是的，你可以给表单添加一个id，然后用document.getElementById("formId")访问它
那么if 声明呢？

【解决方案2】：

您在第二页上有两个表单，但您的脚本只引用了一个表单。您不需要将表单分成两部分（从您当前的代码来看）。

但是，如果您想保留两个表格，这是可能的。在脚本中的任何位置将 document.forms[0] 替换为 document.forms[1]。

【讨论】：