您的位置：首页 > Web前端 > JavaScript

Javascript在客户端实现遍历datagrid,DataList控件,像MSN中的全选

2007-09-14 17:19 746 查看
今天在做项目的时候,想在 DataList实现全选
在网上查了下:
看下面的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了


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>


<HEAD>


<TITLE> 用一个Check或者按钮全选页面上的CheckBox </TITLE>


<META NAME="Generator" CONTENT="EditPlus">


<META NAME="Author" CONTENT="活靶子">


<META NAME="Keywords" CONTENT="">


<META NAME="Description" CONTENT="">


</HEAD>




<BODY>


<form name=frm>


<input type=checkbox value="第一个">


</br>


<input type=checkbox value="第二个">


</br>


<input type=checkbox value="第三个">


</br>


<input type=checkbox value="第四个">


</br>


<input type=checkbox value="第五个">


</br>


<input type="checkbox" name="allbox" value="Check All" onClick="CheckAll();"><font color="#6666FF">


<a href="javascript:CheckAll();" onClick="allbox.checked=!allbox.checked" style="font-size:12px">选中所有CheckBox</a>


</form>


<script language="JavaScript">


<!--


function CheckAll()




  ...{


    for (var i=0;i<document.frm.elements.length;i++)




    ...{


      var e = document.frm.elements[i];


      if (e.name != 'allbox' && e.type.toUpperCase() == "CHECKBOX")


        e.checked = document.frm.allbox.checked;


    }


  }


//-->


</script>


</BODY>


</HTML>





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  datagrid javascript hyperlink asp generator html
相关文章推荐
新的分享
章节导航