[JavaScript]GridView上CheckBox全選某欄 使用javascript的作法

使用javascript,將某Gridview上特定欄的checkbox全選

 

js的部分,主要的function為SelectAll(),其餘部分僅為了與ScriptManager相容。

備註1:GridView上有RowCommand可能會影響到js的cell.childNodes的深度

備註2:尚未補上當列上checkbox打勾時,檢查是否連動全選的checkbox

備註3:尚未檢查是否checkbox為唯讀


Java Script

function SelectAll(checkboxid,Gridid) {          
    var grid = __GetID(Gridid);         
    var cell;            
    if (grid.rows.length > 0)
    {           
        for (i=1; i<grid.rows.length; i++)
        {           
            cell = grid.rows[i].cells[0];
           
            for (j=0; j<cell.childNodes.length; j++)
            {           
                if (cell.childNodes[j].type =="checkbox")
                {
                    cell.childNodes[j].checked = __GetID(checkboxid).checked;
                }
            }
        }
    }
}

function __GetID(vstrID){
    if (typeof(Sys) !== "undefined"){
        return $get(vstrID);
    }
    else {
        return document.getElementById(vstrID);
    }
   
}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();


C#

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //grid header上的全選Checkbox=CheckBox1
        CheckBox CheckBox1= (CheckBox)e.Row.FindControl("CheckBox1");
        if (e.Row.RowType == DataControlRowType.Header)
        {
            //全選的功能
            CheckBox1.Attributes["onclick"] = "SelectAll('"+CheckBox1.ClientID+"','"+ GridView1.ClientID+"')";
        }
    }

 

補充(2009/1/5):特定欄checkbox全選的作法,僅補充javascript,C#部分多一個參數為ColumnIndex即可。

function SelectAllCheckBox_Column(id,Gridid,ColumnIndex) {          
    var grid = document.getElementById(Gridid);          
    var cell;            
    if (grid.rows.length > 0)
    {            
        for (i=1; i<grid.rows.length; i++)
        {  
            cell = grid.rows[i].cells[ColumnIndex];
            if (cell != null)
            {
                for (j=0; j<cell.childNodes.length; j++)
                {            
                    if (cell.childNodes[j].type =="checkbox")
                    {
                        cell.childNodes[j].checked = document.getElementById(id).checked;
                    }

                }

            }

        }

    }

}

或許您會對下列培訓課程感興趣:

  1. 2019/12/21(六)~2019/12/22(日):演化式設計:測試驅動開發與持續重構 第七梯次(台北)
  2. 2020/1/4(六)~2020/1/5(日):Clean Coder:DI 與 AOP 進階實戰 第三梯次(台北)
  3. 2020/02/08(六):【針對遺留代碼加入單元測試的藝術】 第八梯次(台北)
  4. 2020/02/09(日):【極速開發+】 第九梯次(台北)
  5. 2020/02/28(五)~2020/3/1(日) C#進階設計-從重構學會高易用性與高彈性API設計 第三梯次(台北)

想收到第一手公開培訓課程資訊,或想詢問企業內訓、顧問、教練、諮詢服務的,請洽 Facebook 粉絲專頁:91敏捷開發之路