第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

Javascript實(shí)現(xiàn)表格的全選框

標(biāo)簽:
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;
        }
    }
}复制代码



點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫(xiě)下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消