Seleccione todos los elementos en ASP.NET CheckBoxList

Question

ASP.NET y C#.

Me gustaría tener una lista de cheques con un elemento "Seleccionar todo".

• Cuando se selecciona este elemento en particular, todos los demás también serán seleccionados.
• Cuando se elimina la selección de este artículo, también será de todos los demás elementos.
• Verificar/desmarcar cualquier otro elemento solo tendrá un efecto en ese elemento en particular, independientemente del estado de selección del elemento "seleccionar todo".

Estoy buscando una solución jQuery para esto.

Aquí está el código de databinding en mi código.

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();

Y aquí está el marcado:

<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>

Tenga en cuenta que hay múltiples listas de casillas de verificación en la página, por lo que cualquier solución debe tener esto en cuenta.

Answer 1

Algo como podría usar para cualquiera de sus listas de casilla de verificación, solo agregue una clase CSSS de mycheckboxList a cada control de la lista de cheques:

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

Answer 2

Puede iterar a través de todos los listements al hacer clic en SELECCIÓN ALL. Y mantener una bandera de estado para mantener si todas las casillas de verificación están marcadas o no

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

Answer 3

Aquí hay un ejemplo: http://jsfiddle.net/vtgga/

código:

$('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);
    }
})

Esto es lo que el HTML de las casillas de verificación:

<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 4

Extendiendo la brillante respuesta de Mdmullinax, se me ocurrió esta solución genérica para el comportamiento de "seleccionar todo" que también desactiva la opción "Seleccionar todo" (es decir, primero) si alguna otra opción está desanimada y vuelve a marcar el "Seleccione todos" cuando todos los demás elementos están marcados. .

También se ejecuta en la carga de la ventana, ya que la inyecte de los controles del lado del servidor ASP.NET (que inyectan script en la sección principal de la página). Mejor prevenir que lamentar :)

    $(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

Existe una forma genérica de tener un elemento seleccionado en ASP CheckBoxList con el uso de jQuery. Puede tener tantos controles de la lista de cheques en el formulario con la funcionalidad Seleccionar todas. Solo necesitas asegurarte

1. Su lista de cheques tiene permitido Clase
2. Agregó un listitem a su lista de casillas de verificación para permitir a los usuarios seleccionar todos con el valor de Todos

chkboxlist.items.insert (0, nuevo listitem ("all", "all"));

Solo necesitas el siguiente código

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

En el siguiente código Spinet tengo 4 listas de casilla de verificación

<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>