忙裡偷閒的部落格

今天因工作需要，得在GridView中的GridView裡(有點饒口)設個checkbox全選欄位，又懶得寫在後端程式裡，
這時就想:應該是發揮jQuery前端效果製作的威力了。於是嘗試了一下，寫出來了。原理很簡單，以each()去輪巡
table中的tr、td。為什麼是輪巡table呢?因為GridView經過.net的編譯輸出後，就是變成html的table標籤。
您可以布置像以下3x3表格:
 

全選的checkbox id設為CheckAll，其餘兩個分別是CheckBox1、CheckBox2，table標籤的id則是table1。
當全選(checked=true)時，其餘checkbox也為true，反之亦然。
以下為demo code:

$(document).ready(function() {
    $('input[id="CheckAll"]').click(function() {
        var isChecked = $(this).attr('checked'); //先抓取CheckAll checked屬性的值
        var tbl = $('table[id ="table1"]');
        tbl.each(function() {
            $(this).find('tr').each(function() {
                $(this).find('td').each(function() {
                    //CheckAll的屬性值是啥，其他checkbox的屬性值跟著CheckAll跑
                    $(this).find('input[type="checkbox"]').attr('checked', isChecked);                 
                })
            })
        })
     })
})

以jQuery實作全選功能，比寫在後端更為直覺，不用在GridView的事件中寫一堆迴圈、一堆FindControl，(因為要處理的是GridView中的GridView)