3

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>

请注意，页面上有多个复选框列表，因此任何解决方案都必须牢记这一点。

4

5 回答 5

12

您可以将其用于任何复选框列表，只需将 myCheckBoxList 的 cssclass 添加到每个 CheckBoxList 控件：

$('.myCheckBoxList :checkbox').eq(0).click(function() { 
    var toggle = this.checked;
    $('.myCheckBoxList :checkbox').attr("checked", toggle);
});
于 2011-03-22T20:20:33.870 回答
1

您可以在单击全选时遍历所有 ListItem。并维护一个状态标志来维护是否所有的复选框都被选中

if(boolAllChecked) {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = false;
    }
}
else {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = true;
    }
}
于 2011-03-22T20:16:38.783 回答
0

这是一个例子：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' />
于 2011-03-22T20:15:59.863 回答
0

扩展 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);
            }
        });
    });
于 2012-07-06T13:38:59.813 回答
0

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

  1. 你的 CheckBoxList 有allowSelectAll类
  2. 您在复选框列表中添加了一个 ListItem，以允许用户选择值为 All 的All

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>

在下面的代码spinet中，我有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>
于 2014-05-20T00:50:02.283 回答