JavaScript实现DataGrid中的CheckBox全选与否

原创 2006年05月21日 10:43:00
 

(一).功能

    1. JavaScript检索CheckBox并实现全选和全消功能

         用C#等写的CheckBox需要回发到服务端执行,
         而用JavaScript可以在直接客户端实现,效率高些

(二).代码

       1. DataGrid中的代码主要片段:

        <Columns>

            <HeaderTemplate>       //头模板代码
                   <asp:CheckBox id="chkHeader" runat="server" AutoPostBack="False"   //AutoPostBack设为假,不需要回发

                            onclick="javascript:SelectAll(this);"></asp:CheckBox>
            </HeaderTemplate>

           <ItemTemplate>            //项模板代码
                   <asp:CheckBox id="chkItem" runat="server"></asp:CheckBox>
           </ItemTemplate>

        </Columns>

2.  在当页加入:

  <script language="javascript">
       function SelectAll(tempControl)
       {
           //将除头模板中的其它所有的CheckBox取反 

            var theBox=tempControl;
             xState=theBox.checked;   

            elem=theBox.form.elements;
            for(i=0;i<elem.length;i++)
            if(elem[i].type=="checkbox" && elem[i].id!=theBox.id)
             {
                  if(elem[i].checked!=xState)
                        elem[i].click();
            }
  }  
</script>

相关文章推荐

Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能

CheckBoxHeaderRenderer.as view plain package    {              import flash.events.Event;     ...

flex datagrid 嵌checkbox实现全选与数据存储(非绑定数据源)

重写了DataGrid,主要是为了得到DataGrid的listItems属性,listItems保存了当前现显示的每一行的信息,还用了个ArrayCollection保存被选中了行的信息。 MyD...

在Flex中简单实现 dataGrid结合CheckBox使项目可选、全选、反选

对用户来讲,软件的功能性之外还要求其易用习惯性。非专业用户习惯了用鼠标点而不大适应键盘+鼠标。Flex的DataGrid虽然可以允许用户多选项目,但是这个多选需要结合Ctrl或Shift键来完成。而我...

WPF中DataGrid 添加checkbox实现全选、多选

在机房合作项目中,有一个窗体是这样子的               简单介绍一下:就是通过查询出正在上机的学生,可以通过勾选前面的checkbox,选中该行,然后可以进行部分下机和全部下机。如...

Flex DataGrid中嵌套Checkbox实现全选 另分享一个checkbox居中,圆形布局代码

这个页面的最终效果如果所示:         当CheckBox没有被选中时第二列不能被编辑,第三列可以被编辑。         当CheckBox被选中时,第二列可以被编辑,第三列不能被编辑。 ...

JavaScript学习笔记之js实现复选框checkbox的全选、反选示例

1.选中全选复选框,则其他的复选框自动全部选中; 2.已选中全选复选框,再次点击全选复选框,则其他复选框全部不选中; 3.当全部其他复选框都被选中时,全选复选框自动被选中; 4.当全部其他复选框...

jquert结合原生javascript实现的checkbox全选与全不选

之所以要使用原生javascript,是因为jQuery的attr方法在这里不能实现,具体是怎么样的,我也不知道。 html代码: 全部选定 全部取消 javascript代码: 得保...

用Javascript实现checkbox全选、全不选

用Javascript实现checkbox全选、全不选

javascript checkbox作为开关,控制全选和全不选的动态关联实现

如你所知如果使用一个checkbox作为一组checkbox的总开关的话。那么,总开关的逻辑当然是:在当前全部选中的情况下,点击总开关,就会全部不选中;否则,就全部选中。 另外,当被控制的子check...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现DataGrid中的CheckBox全选与否
举报原因:
原因补充:

(最多只允许输入30个字)