【问题标题】:Select all CheckBoxes in CheckBoxList选择 CheckBoxList 中的所有 CheckBox
【发布时间】:2017-07-20 01:55:19
【问题描述】:

我的网页上有一个CheckBox 和一个CheckBox 列表。
如果选择了CheckBox,则应选择CheckBoxList 中的所有CheckBoxes,如果未选中CheckBox,则同样应取消选择CheckBox 中的所有CheckBoxes(未选中)。

.aspx 代码

<asp:CheckBoxList ID="CheckBoxList1" runat="server" 
            RepeatDirection="Horizontal" RepeatLayout="Flow">
            <asp:ListItem>Item A</asp:ListItem>
            <asp:ListItem>Item B</asp:ListItem>
            <asp:ListItem>Item C</asp:ListItem>
            <asp:ListItem Selected="True">Item D</asp:ListItem>
            <asp:ListItem>Item E</asp:ListItem>
            <asp:ListItem>Item F</asp:ListItem>
            <asp:ListItem>Item G</asp:ListItem>
        </asp:CheckBoxList>
<asp:CheckBox ID="allChkBox" Text="Select all" runat="server" 
                oncheckedchanged="allChkBox_CheckedChanged" />

我尝试过这样做,但它不起作用:

bool prevSelection = false;
protected void allChkBox_CheckedChanged(object sender, EventArgs e)
    {
if (!prevSelection)
        {
            foreach (ListItem chkitem in CheckBoxList1.Items)
            {
                chkitem.Selected = true;
            }
        }
        else
        {
            foreach (ListItem chkitem in CheckBoxList1.Items)
            {
                chkitem.Selected = false;
            }
        }
        prevSelection = !prevSelection;
}

【问题讨论】:

  • 你能提供你的aspx代码吗?
  • 好的.. 其他人提供了答案。我建议..您应该在客户端 javascript 中执行此操作,而无需回发。

标签: c# asp.net checkbox checkboxlist


【解决方案1】:

我更喜欢将客户端脚本用于这样的事情,这样您的页面就不必进行回发

如果有可能,请尝试在单击时触发 javascript 函数以进行循环并选择...类似

<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
    var aa= document.getElementById('frm1');
     if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = false
          }
    for (var i =0; i < aa.elements.length; i++) 
    {
           if(aa.elements[i].type == 'checkbox') { 
             aa.elements[i].checked = checked;
           }
    }
 }
</script>

【讨论】:

  • 需要检查html输入类型.. aa.elements[i].type == 'checkbox'
  • 我在考虑使用复选框而不是单击按钮来选中/取消选中所有复选框。但是,看起来CheckBoxAll 没有客户端功能可以检测CheckBox 是否已被取消选中/选中。是否可以使用checkbox 来完成,即如果选中CheckBoxAll,它应该自动选中所有其他复选框。
【解决方案2】:

自从我涉足 ASP.NET 已经有一段时间了,但是您的 prevSelection 字段将在每个请求上初始化为 false。该值不会在请求之间保留。因此,您需要将其存储在 View State 或缓存中并从那里加载到您的事件处理程序中,或者更好的是,将您的方法更改为以下内容:

protected void allChkBox_CheckedChanged(object sender, EventArgs e)
{
    foreach (ListItem chkitem in CheckBoxList1.Items)
    {
        chkitem.Selected = allChkBox.Selected;
    }
}

【讨论】:

    【解决方案3】:

    如果我正确理解了要求,这个怎么样!)?这将使 CheckBoxList 控件中的所有项目 selected 在呈现时默认显示:

    protected void Page_Load(object sender, EventArgs e)
    {
      if (Page.IsPostBack) return;
      LoadCountryList();
    }
    
    
    private void LoadCountryList()
    {
      _ctx = new PayLinxDataContext();
    
      chkCountries.DataSource = _ctx.Countries.OrderBy(c => c.Name);
      chkCountries.DataBind();
    
      foreach (ListItem item in chkCountries.Items)
      {
        item.Selected = true;
      }
    }

    【讨论】:

      【解决方案4】:

      与其在函数外使用变量,不如使用复选框本身:

      protected void allChkBox_CheckedChanged(object sender, EventArgs e)
      {
          CheckBox chkbox = sender;
      
          foreach (ListItem chkitem in CheckBoxList1.Items)
          {
              chkitem.Selected = chkbox.Selected;
          }
      }
      

      【讨论】:

        【解决方案5】:

        你可以像这样用linq做到这一点

        var allChecked = (from ListItem item in CheckBoxList1.Items 
                                      where item.Selected 
                                      select int.Parse(item.Value)).ToList();
        
        
          var all = (from ListItem item in CheckBoxList1.Items 
        
                                          select int.Parse(item.Value)).ToList();
        

        【讨论】:

          【解决方案6】:
          function CheckUnCheckAll()
              {
                  var list = document.getElementById("<%=DataList1.ClientID%>") ;
                  var chklist = list.getElementsByTagName("input");
                  for (var i=0;i<chklist.length;i++)
                  {
                      if (chklist[i].type=="checkbox" )
                      {
                          chklist[i].checked = checkoruncheck;
                      }
                  } 
              }
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2012-03-18
            • 2019-02-14
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多