javascript實現複選框的全選功能

來源:互聯網
上載者:User

複選框的全選功能在Web開發中使用非常頻繁,而實現的方法一般分為兩種:用戶端實現與伺服器端實現。
伺服器端實現需要與伺服器端互動,因此效率較差。今天向大家介紹一下用指令碼在用戶端實現此功能的方法。
效果

當點擊按鈕或全選複選框時,上表中的所有資料被鉤上。
下面是js代碼:

<script type="text/javascript">
    //根據傳入的checkbox的選中狀態設定所有checkbox的選中狀態
    function selectAll(obj)
    {
        var allInput = document.getElementsByTagName("input");
        //alert(allInput.length);
        var loopTime = allInput.length;
        for(i = 0;i < loopTime;i++)
        {
            //alert(allInput[i].type);
            if(allInput[i].type == "checkbox")
            {
                allInput[i].checked = obj.checked;
            }
        }
    }
</script>

調用時:

<input id="chk_SelectALL" type="checkbox" onclick="selectAll(this)" />全選

就可實現了。
由於是在用戶端完成此效果,所以控制項不能使用伺服器端控制項,否則無效。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.