实现checkboxlist的全选

最新推荐文章于 2024-04-04 19:20:16 发布

萤火虫小Q

最新推荐文章于 2024-04-04 19:20:16 发布

阅读量6k

点赞数

分类专栏：编程文章标签： asp input server null function object

本文链接：https://blog.csdn.net/qin_zhangyongheng/article/details/7798775

版权

编程专栏收录该内容

72 篇文章 1 订阅

订阅专栏

第一种：利用客户端控件实现
JS:

<script type="text/javascript">
function checkAll()
{
var checklist=document.getElementsByTagName("input");
for(var i=0;i<checklist.length;i++)
{
if(checklist[i].type=="checkbox")
{
checklist[i].checked=document.form1.ck.checked;
}
}
}
</script>

GridView控件：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="产品编号" />
<asp:TemplateField>
<HeaderTemplate>
<input id="ck" type="checkbox" οnclick="checkAll();" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="checkbox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

第二种：利用服务器端控件实现
复制代码代码如下:
protected void 全选_CheckedChanged(object sender, EventArgs e)
{
if (全选.Checked == true)
{
for (int i = 0; i < GridView1.Rows.Count; i++)
{
CheckBox ck = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("checkbox1") as CheckBox;
if (ck!=null)
{
ck.Checked = true;
}
}
}
else
{
for (int i = 0; i < GridView1.Rows.Count; i++)
{
CheckBox ck = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("checkbox1") as CheckBox;
if (ck != null)
{
ck.Checked = false;
}
}
}
}

或者，你可以像这样来做:
<html>
<head><title></title></head>
<body>
<input type="checkbox" id="chkAll" name="chkAll" value="checkbox" οnclick="checkAll('chkAll',this);" />
<input type="checkbox" name="chkSelect"   οnclick="checkAll('chkAll',this);" />
<input type="checkbox" name="chkSelect"   οnclick="checkAll('chkAll',this);" />
<input type="checkbox" name="chkSelect"   οnclick="checkAll('chkAll',this);" />
<input type="checkbox" name="chkSelect"   οnclick="checkAll('chkAll',this);" />
<input type="checkbox" name="chkSelect"   οnclick="checkAll('chkAll',this);" />

<script type="text/javascript">
function checkAll(chkAllID,thisObj)
{
    var chkAll = document.getElementById(chkAllID);
    var chks = document.getElementsByTagName("input");
    var chkNo = 0;
    var selectNo = 0;
    for(var i =0; i < chks.length; i++)
    {
       if(chks[i].type == "checkbox")
       {
          //全选触发事件  
          if(chkAll == thisObj)
          {
             chks[i].checked = thisObj.checked;             
          }          
          //非全选触发
          else
          {
            if(chks[i].checked && chks[i].id != chkAllID)
             selectNo++;
          }
          if(chks[i].id != chkAllID)
          {
            chkNo++;
          }
       }
    } 
    if(chkAll != thisObj)
    {
        chkAll.checked = chkNo==selectNo;
    }
}
</script>
</body>


</html>

萤火虫小Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现checkboxlist的全选

第一种：利用客户端控件实现 JS: function checkAll() { var checklist=document.getElementsByTagName("input"); for(var i=0;i{ if(checklist[i].type=="checkbox") { checklist[i].checked=document.fo
复制链接

扫一扫

专栏目录