用Javascript在用戶端實現遍曆datagrid,DataList控制項,像MSN中的全選

用Javascript在用戶端實現遍曆datagrid,DataList控制項,像MSN中的全選

剛剛看了..NET中遍曆DataList控制項,像MSN中的全選
的文章，突然想起我也做過類似功能，就是把控制項裡的行迴圈一次，這樣一來會產生一個PostBack，要服務期端進行處理，我想這樣一來好象對資源進行了浪費。

看下面的datagrid代碼

<asp:TemplateColumn HeaderText="刪除文章">
                                    <HeaderTemplate>
                                        刪除文章
                                        <input type="checkbox" id="checkDel"  title="全選/全取消刪除文章" onclick="CheckDelBox(this)" /><font  color=#ff0000 size=1>全選/全取消</font>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox id="deleteCheckbox" runat="server" AutoPostBack="False"></asp:CheckBox>
                                    </ItemTemplate>
                                </asp:TemplateColumn>

我在選擇id="checkDel" 的選擇框時，要對模版中的deleteCheckbox進行全選和全取消
我調用了js
function CheckDelBox(box)    
{
        for (var i=0;i<document.Form1.elements.length;i++)
    {
        var e = document.Form1.elements[i];
        if ( (e.type=='checkbox') )
        {
            
                var o=e.name.lastIndexOf('deleteCheckbox');
                
                if(o!=-1)
                {
                    e.checked = box.checked;
                }
        
        }
    }
}

注意這段代碼
var o=e.name.lastIndexOf('deleteCheckbox');

在某些情況下，id在用戶端的呈現不是在aspx中你指定的id了，而是控制項.ClientID，比如在DataGrid中放置的一些伺服器端控制項，查看一下原始碼可以看到id是類似DataGrid1__ctl5_Hyperlink1而不是你指定的id了
 
所以我得做相應判斷

大家還可以參考
http://www.cnblogs.com/lovecherry/archive/2005/03/25/125516.html