复选框在DataGrid中的使用

   <ASP:DATAGRID id="MyDataGrid" runat="server" Width="667px" Font-Size="10pt" AutoGenerateColumns="False"
    HeaderStyle-BackColor="darkred" HeaderStyle-ForeColor="white" Height="160px">
     <HeaderStyle ForeColor="White" BackColor="DarkRed"></HeaderStyle>
     <Columns>
      <asp:TemplateColumn>
       <HeaderTemplate>
       <input type="checkbox" name="allbox" onclick="SelectAll();"/>

       <font face="Webdings" color="white" size="4">选择</font>
       <HeaderTemplate>
       <ItemTemplate>
        <asp:CheckBox ID="SelectCheckBox" onclick="javascript:Select(this);" runat="server" />
       </ItemTemplate>
      </asp:TemplateColumn>
     <asp:BoundColumn DataField="NAME" HeaderText="文字说明"></asp:BoundColumn>

     </Columns>
    </ASP:DATAGRID>+br>

 

相关的js文件

//CheckBox全选
function SelectAll(){
var frm=document.Form1;
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ((e.name != 'allbox') && (e.type=='checkbox'))
{
e.checked=frm.allbox.checked;
if (frm.allbox.checked)
{
hL(e);
}//endif
else
{
dL(e);
}//endelse

}//endif
}//endfor
}

//CheckBox选择项
function Select(CB)
{
var frm=document.Form1;
if (CB.checked)
hL(CB);
else
dL(CB);

var TB=TO=0;
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ((e.name != 'allbox') && (e.type=='checkbox'))
{
TB++;
if (e.checked)
TO++;
}
}
frm.allbox.checked=(TO==TB)?true:false;
}

//以下两个用于控制被选择的行的颜色显示的变化 需要相关的css文件配合
function hL(E){ 
while (E.tagName!="TR")
{E=E.parentElement;}
E.className="H";
}

function dL(E){
while (E.tagName!="TR")
{E=E.parentElement;}
E.className="";
}

 

//相关css文件如下：

.{
 font-size : 12pt;
}
.H{
/*用于select*/
 font-size : 12pt;
        /*cursor:hand;*/
        color:#3366ff;
        background : #FFF3F3;
 border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;
}