Question

运行第一个代码段，<td>中的复选框数量将通过单击表格标题的复选框显示在警告框中。但是，运行第二个代码段时，<td>中的复选框数量将不会显示在警告框中。

注意：第一个片段获得三个表格行，第二个片段获得两个表格行。

任何人都可以帮助我吗？提前谢谢！

------------- 1st Snippet --------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
        function CheckAll(formName,eleName,controlID)
        {
            var count = document.forms[formName].elements[eleName].length;
            alert(count);
        }
    </script>
    </head>

    <body>
    <form name="report" method="post" action="#">

        <table border="1">
            <tr>
                <th width="5%">
                <input type='checkbox' id="selectController" onClick="CheckAll('report','list[]',this.id)"/>
                </th>
                <th width="30%">
                Name
                </th>
                <th width="30%">
                Number
                </th>
                <th width="35%">
                </th>
            </tr>
            <tr id='row0' class='odd' >
                <td >
                <input name='list[]' type='checkbox'  value="1" id='checkbox-1' onClick='ClickCheckbox(this.id)' />
                </td>
                <td>
                SensorA
                </td>
                <td>
                1234567
                </td>
                <td>
                    [ <a href="#" class="basketlink">Add</a> ]
                </td>
            </tr>
            <tr id='row1' class='even' >
                <td >
                <input name='list[]' type='checkbox'  value="2" id='checkbox-2' onClick='ClickCheckbox(this.id)' />
                </td>
                <td>
                SensorA
                </td>
                <td>
                1234567
                </td>
                <td>
                    [ <a href="#" class="basketlink">Add</a> ]
                </td>
            </tr>

        </table>
    </form>
    </body>
    </html>

-----------第二个片段--------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function CheckAll(formName,eleName,controlID)
    {
        var count = document.forms[formName].elements[eleName].length;
        alert(count);
    }
</script>
</head>

<body>
<form name="report" method="post" action="#">

    <table border="1">
        <tr>
            <th width="5%">
            <input type='checkbox' id="selectController" onClick="CheckAll('report','list[]',this.id)"/>
            </th>
            <th width="30%">
            Name
            </th>
            <th width="30%">
            Number
            </th>
            <th width="35%">
            </th>
        </tr>
        <tr id='row0' class='odd' >
            <td >
            <input name='list[]' type='checkbox'  value="1" id='checkbox-1' onClick='ClickCheckbox(this.id)' />
            </td>
            <td>
            SensorA
            </td>
            <td>
            1234567
            </td>
            <td>
                [ <a href="#" class="basketlink">Add</a> ]
            </td>
        </tr>
    </table>
</form>
</body>
</html>

Answer 1

在第二种情况下只有一种。因此，您不会获得NodeList（一种数组），而是获得没有.length属性的元素本身。因此，在.length === undefined的情况下，假设它是1。

缩小范例：

使用1个元素：http://jsfiddle.net/9J4fB/1/
有2个元素：http://jsfiddle.net/9J4fB/

Answer 2

你的问题是“。length”。 length是数组的属性，而不是每个javascript对象。在你的第二个片段中，因为你只有一个复选框，你将通过document.forms [formName]获取你的内容.elements [eleName]是一个对象，而不是一个数组;此对象没有length属性。因此你应该做这样的事情：

    var count;
if(document.forms[formName].elements[eleName].length)
 count = document.forms[formName].elements[eleName].length;
else
 count = 1 //only if you are sure that you will always have 1 checkbox rendered, otherwise use some other logic to say 0 or 1.

Javascript checkAll功能

2 个答案: