关闭

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

807人阅读 评论(0) 收藏 举报
今天在做项目的时候,想在 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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:92421次
    • 积分:1723
    • 等级:
    • 排名:千里之外
    • 原创:74篇
    • 转载:8篇
    • 译文:0篇
    • 评论:14条
    文章分类
    分类信息