Выбрать все элементы в asp.net CheckBoxList - PullRequest
Новая
       30

Выбрать все элементы в asp.net CheckBoxList

3 голосов
/ 22 марта 2011

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>

Обратите внимание, что настраница, поэтому любое решение должно иметь это в виду.

Ответы [ 5 ]

12 голосов
/ 22 марта 2011

Нечто подобное вы можете использовать для любого из своих списков флажков, просто добавьте cssclass myCheckBoxList для каждого элемента управления CheckBoxList: 

$('.myCheckBoxList :checkbox').eq(0).click(function() { 
    var toggle = this.checked;
    $('.myCheckBoxList :checkbox').attr("checked", toggle);
});
1 голос
/ 22 марта 2011

Вы можете перебирать все ListItems по щелчку Select All.И поддерживать флаг состояния, чтобы поддерживать, установлены ли все флажки или нет 

if(boolAllChecked) {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = false;
    }
}
else {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = true;
    }
}
0 голосов
/ 20 мая 2014

Существует универсальный способ выделения всех элементов в asp CheckBoxList с использованием jquery.Вы можете иметь столько элементов управления CheckBoxList в форме, что и выбрать все функции.Вам нужно только убедиться, что

  1. Ваш CheckBoxList имеет allowSelectAll Класс
  2. Вы добавили ListItem в свой список флажков, чтобы пользователи могли выбрать All со значением All Все

chkBoxList.Items.Insert (0, новый ListItem ("All", "All"));

youНужен только следующий код 

<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>
0 голосов
/ 06 июля 2012

Расширяя блестящий ответ 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);
            }
        });
    });
0 голосов
/ 22 марта 2011

вот пример: 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' />
...