Javascript實現表格的全選框

這是一個老生常談的問題了，不過還是拿我的解決辦法來晒晒太陽。

最開始我是為Table中的每一項添加屬性 class="item1" 的方式實現的

1. 第一種解決方案

<table border="1" cellpadding="3" cellspacing="0">
    <tr>
        <th>
            <input type="checkbox" onclick="checkAll(this, 'item1');" />
        </th>
        <th>ID</th>
        <th>使用者名稱</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item1" />
        </td>
        <td>1001</td>
        <td>張三</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item1" />
        </td>
        <td>1002</td>
        <td>李四</td>
    </tr>
</table>

 

function checkAll(sender, checkClass) {
    var checkItems = document.getElementsByTagName('input');
    for (var i = 0; i < checkItems.length; i++) {
        var checkItem = checkItems[i];
        if (checkItem.type === 'checkbox' && checkItem.className === 'item1') {
            checkItem.checked = sender.checked;
        }
    }
}

 
仔細分析，這裡面使用的 getElementsByTagName 會把頁面上所有的 input 標籤都找到（包括單行文本輸入框，

按鈕，所有的單選和多選框等），然後再執行過濾，這是一種效率不高的方法。

如果能用 getElementsByName 直接擷取需要的多選框，豈不是更高效，就有了下面的方法

2. 第二種解決方案

<table border="1" cellpadding="3" cellspacing="0">
    <tr>
        <th>
            <input type="checkbox" onclick="checkAll2(this, 'item1');" />
        </th>
        <th>ID</th>
        <th>使用者名稱</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="item1" />
        </td>
        <td>1001</td>
        <td>張三</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="item1" />
        </td>
        <td>1002</td>
        <td>李四</td>
    </tr>
</table>

 

function checkAll2(sender, checkName) {
    var checkItems = document.getElementsByName(checkName);
    for (var i = 0; i < checkItems.length; i++) {
        checkItems[i].checked = sender.checked;
    }
}

 

代碼下載

[updated,2009-2-17]

上面這種方法雖然簡潔，但是 getElementsByName 只是 document 的方法，其他DOM對象沒有此方法。（正如留言中 @笛子 所說）

所以效率比較高的方法，還是在table的上下文中使用 getElementsByTagName 來尋找，我們給 table 添加 id 屬性

為 table1。

3. 效率比較高的解決方案

 

<input type="checkbox" onclick="checkAll3(this, 'table1', 'item1');" />

 

function checkAll3(sender, tableId, checkClass) {
    var checkItems = document.getElementById(tableId).getElementsByTagName('input');
    for (var i = 0; i < checkItems.length; i++) {
        var checkItem = checkItems[i];
        if (checkItem.type === 'checkbox' && checkItem.className === 'item1') {
            checkItem.checked = sender.checked;
        }
    }
}

代碼下載