在asp.net中选择所有项CheckBoxList

Question

ASP.NET和C＃。

我想要一个带有“全选”项的CheckboxList。

• 在这个特殊的产品 选择，其他的都会被选中 了。
• 当选择从 删除此项目，也将从所有 其他项目。
• 检查/取消选中 任何其他项目只会对该特定项目 产生 的影响，无论选择状态为 “全选”项目。

我正在寻找一个jQuery解决方案。

这里是我的代码隐藏数据绑定代码：

IList<Central> Centrals = new CentralProvider().GetAllCentralsAsList(); 
Centrals.Insert(0, new Central(){Central_ID = 999, Central_Name = "Select All"}); 
CentralChecks.DataSource = Centrals; 
CentralChecks.DataTextField = "Central_Name"; 
CentralChecks.DataValueField = "Central_ID"; 
CentralChecks.DataBind(); 

这里是标记：

<div class="CentralDiv" id="CentralDiv"> 
    <h2>Centrals:</h2> 
    <span> 
     <asp:TextBox ID="CentralTextBox" runat="server" CssClass="textbox">Centrals</asp:TextBox> 
     <img id="CentralArrow" src="images/down_arrow.jpg" style="margin-left: -22px; margin-bottom: -5px" /> 
    </span> 
    <div id="CentralEffect" class="ui-widget-content"> 
     <asp:CheckBoxList ID="CentralChecks" runat="server" onclick="GetSelectedCentralValue();"> 
     </asp:CheckBoxList> 
    </div> 
</div> 

注意，有页面上的多个复选框列表，因此任何解决方案都必须保持这个心里。

Answer 1

喜欢的东西，你可以使用任何你的复选框列表，只需添加myCheckBoxList的的CssClass每个CheckBoxList控件：

$('.myCheckBoxList :checkbox').eq(0).click(function() { 
    var toggle = this.checked; 
    $('.myCheckBoxList :checkbox').attr("checked", toggle); 
}); 

Answer 2

这里有一个例子：http://jsfiddle.net/VTgGA/

代码：

$('input:checkbox').click(function(){ 
    var $this = $(this); 

    if($this.attr('ref') != 'checkall'){ 
     $(".select-all").attr('checked',false); 
    } 
    else { 
     //Select All 
     var $checked = $this.is(':checked'); 
     $('input:checkbox').each(function(){ 
      $(this).attr('checked',$checked); 
     }) 
     $(".select-all").attr('checked',$checked); 
    } 
}) 

这是复选框的HTML：

<input type='checkbox' ref='checkall' class='select-all'/> 
<input type='checkbox' /> 
<input type='checkbox' /> 
<input type='checkbox' /> 
<input type='checkbox' /> 
<input type='checkbox' /> 
<input type='checkbox' /> 

Answer 3

您可以通过在全选的点击所有listItems中的迭代。并保持状态标志，以维护所有复选框是否选中或不

if(boolAllChecked) { 
    foreach (ListItem listItem in CentralChecks.Items) 
    { 
     listItem .Selected = false; 
    } 
} 
else { 
    foreach (ListItem listItem in CentralChecks.Items) 
    { 
     listItem .Selected = true; 
    } 
}   

Answer 4

扩展mdmullinax的辉煌答案，我想出了这个通用的解决方案，用于“全选”行为，如果其他选项未被选中，也会剔除“全选”（即第一个）选项，并在所有其他选项都是“全选”勾选。

它也在窗口加载时执行，因为我从ASP.Net服务器端控件（它在页面的头部插入脚本）注入它。更好地安全，比对不起:)

$(window).load(function() { 
     var cbs = $('.myCheckBoxList :checkbox'); 
     cbs.eq(0).click(function() { 
      var toggle = this.checked; 
      cbs.attr('checked', toggle); 
     }); 
     cbs.slice(1).click(function() { 
      if (!this.checked) { 
       cbs.eq(0).attr('checked', false); 
      } else { 
       cbs.eq(0).attr('checked', cbs.slice(1).filter(':not(:checked)').length == 0); 
      } 
     }); 
    }); 

Answer 5

有一种通用的方式，使用jquery在ASP CheckBoxList中选择所有项目。 在选择所有功能的表单上，您可以拥有多达CheckBoxList控件。 你只需要确保

1. 你的CheckBoxList已经allowSelectAll类
2. 您添加了一个列表项到您的复选框列表，让用户选择 所有的所有

值

chkBoxList.Items.Insert（0，new ListItem（“All”，“All”））;

你只需要下面的代码

<script> 
    $('.allowSelectAll :checkbox[value=All]').click(function() { 
     var toggle = this.checked; 
     $(this).closest('.allowSelectAll').find(":checkbox").attr("checked", toggle); 
    }); 
</script> 

在下面的代码尖晶石，我有4个复选框列出

<div > 
<label>Experience 1</label> 
<asp:CheckBoxList ID="chklstExp1" runat="server" CssClass="allowSelectAll"> 
</asp:CheckBoxList> 

<label>Experience 2</label> 
<asp:CheckBoxList ID="chklstExp2" runat="server" CssClass="allowSelectAll"> 
</asp:CheckBoxList> 

<label>Experience 3</label> 
<asp:CheckBoxList ID="chklstExp3" runat="server" CssClass="allowSelectAll"> 
</asp:CheckBoxList> 

<label>Location</label> 
<asp:CheckBoxList ID="chklstLocation" runat="server" CssClass="allowSelectAll"> 
</asp:CheckBoxList> 

<asp:Button runat="server" ID="btnShowReport" OnClick="btnShowReport_Click" Text="Show Report"/> 
</div>