Jak mohu implementovat „Vybrat vše“ políčko v mém ASP.NET MVC aplikace?

jQuery ( EDITOVANÁ přepínat kontrolu / zrušte všechny):

$(document).ready(function() {
    $("#toggleAll").click(function() {  
      $("#chex :checkbox").attr("checked", $(this).attr("checked"));
    });    
});

Důvod, proč jsem musel udělat click()a pak zkontrolovat checkedstav je proto, že pokud se pokusíte „ toggle“ zaškrtávací políčko, políčko je přepnuto neudrží svou zkontrolovat stav. Tímto způsobem si zachovává status kontrolní a účinně přepínat.

HTML:

<input type="checkbox" id="toggleAll" />
<div id="chex">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

KingNestor:

Jste také bude potřebovat na tento odkaz (pokud jste tak již neučinili ji objevil):

http: //www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysLists ...

Zatímco odpovědi vyslán dříve bude fungovat, budete narazit na problémy, pokud máte více než jednu sadu políček na jediné stránce.

Tento formát bude fungovat bez ohledu na to:

<table>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Tabular Data 1</td>
            <td>Tabular Data 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Tabular Data 3</td>
            <td>Tabular Data 4</td>
        </tr>
    </tbody>
</table>

a skript ...

$(function() {
    $('th > :checkbox').click(function() {
        $(this).closest('table')
            .find('td > :checkbox')
            .attr('checked', $(this).is(':checked'));
    });
});

Mírně modifikovat značky z Marve je odpověď (což ID tabulky)

Pracovní Demo →

UPRAVIT:

Aktualizovaná verze, kde políčko ‚selectAll‘ správně odráží stav zaškrtávacích políček. Například pokud vyberete všechny políčka ručně, automaticky si zkontrolovat checkbox selectAll. Zkuste demo k pochopení chování.

Kód:

<table id='myTable'>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Tabular Data 1</td>
            <td>Tabular Data 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Tabular Data 3</td>
            <td>Tabular Data 4</td>
        </tr>
    </tbody>
</table>

Váš jQuery může být tak jednoduché, jak to:

$(document).ready(
    function()
    {
        $('#myTable th input:checkbox').click(
            function() 
            {
                $('#myTable td input:checkbox').attr('checked', $(this).attr('checked'));
            }
        );

        //The following code keeps the 'selectAll' checkbox in sync with
        //the manual selection of the checkboxes by user. This is an additional usability feature.
        $('#myTable tr input:checkbox').click(
            function()
            {
                var checkedCount = $('#myTable td input:checkbox:checked').length;
                var totalCount = $('#myTable td input:checkbox').length;
                $('#myTable th input:checkbox').attr('checked', checkedCount === totalCount);
            }
        );
    }
 );

To bude mít všechny jednotlivé zaškrtávací políčka stejný jako ten, „zkontrolovat všechny“

$("#id-of-checkall-checkbox").click(function() {
    $(".class-on-my-checkboxes").attr('checked', this.checked);
});

To bude mít jen „zkontrolovat všechny“ jeden v synchronizaci s tím, zda jsou či nejsou jednotlivá políčka vlastně všechno zkontrolovat, či nikoli

$(".class-on-my-checkboxes").click(function() {
    if (!this.checked) {
        $("#id-of-checkall-checkbox").attr('checked', false);
    }
    else if ($(".class-on-my-checkboxes").length == $(".class-on-my-checkboxes:checked").length) {
        $("#id-of-checkall-checkbox").attr('checked', true);
    }
});

Zkuste to HTML tabulky.

<table class="rptcontenttext" style="width: 100%; border-style: solid; border-collapse: collapse"  
         border="1px" cellpadding="0" cellspacing="0">  
         <thead>  
           <tr>  
             <th style="text-align:left;width:10px;">  
             <input type="checkbox" value="true" name="chkVerifySelection" id="chkVerifySelection" onchange="return     checkAllVerifySelection();" />  
             </th>  
             <td class="rptrowdata" align="left">  
               Employee ID  
             </td>  
           </tr>  
         </thead>  
         <tbody style="overflow-y: auto; overflow-x: hidden; max-height: 400px; width: 100%;">  
             @for (int i = 0; i < Model.EmployeeInformationList.Count; i++)  
             {      
           <tr>  
             <td style="width:10px">    
               @{  
               if (Model.EmployeeInformationList[i].SelectStatus==true)  
                 {  
                 @Html.CheckBoxFor(model => model.EmployeeInformationList[i].SelectStatus, new { @class = "VerifyStatus" ,disabled =                  "disabled",@checked="checked" })   
                 }  
                 else  
                    {  
                   @Html.CheckBoxFor(model => model.EmployeeInformationList[i].SelectStatus, new { @class = "VerifyStatus" })   
                    }  
                 }        
            </td>             
             <td class="rptrowdata" align="left" style="width: 70px">  

               @Html.Encode(Model.EmployeeInformationList[i].StrEmpID)   

             </td>  
              <td class="rptrowdata" align="center" style="width: 50px">  
               @Html.HiddenFor(m=>m.EmployeeInformationList[i].strEmpOldCardNo)  
                @Html.Encode(Model.EmployeeInformationList[i].strEmpOldCardNo)  
             </td>  
           </tr>  
             }  
         </tbody>  
       </table>  

Skript:

 function checkAllVerifySelection() {  
     var flag = $('input[name=chkVerifySelection]').is(':checked');  
     if (flag) {  
       $(".VerifyStatus").each(function () {  
         $(this).attr('checked', true);  
       });  
     }  
     else {  
       $(".VerifyStatus").each(function () {  
         $(this).attr('checked', false);  
       });  
     }  
     return true;  
   } 

Pro mě Jeremyho řešení většinou pracoval, ale musel jsem vyměnit .attr s .prop. Jinak jsem kdysi jediného kliknutí na zaškrtávací políčko, že by přestal reagovat na políčko „master“.

v (vzorové stránky) _Layout.cshtml

$(document).ready(
    manageCheckboxGroup('chkAffectCheckboxGroup', 'checkbox-group')
);

v odkazované JS

    function manageCheckboxGroup(masterCheckboxId, slaveCheckboxesClass) {

    $("#" + masterCheckboxId).click(function () {
        $("." + slaveCheckboxesClass).prop('checked', this.checked);
    });

    $("." + slaveCheckboxesClass).click(function () {
        if (!this.checked) {
            $("#" + masterCheckboxId).prop('checked', false);
        }
        else if ($("." + slaveCheckboxesClass).length == $("." + slaveCheckboxesClass + ":checked").length) {
            $("#" + masterCheckboxId).prop('checked', true);
        }
    });
}

na stránce (Razor) HTML

<table class="table">
    <thead>
        <tr>
            <th><input id="chkAffectCheckboxGroup" type="checkbox" checked="checked" /></th>
            <th>
                @Html.DisplayNameFor(model => model.Clients[0].ClientId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Clients[0].Name)
            </th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Clients.Count(); i++)
        {
            <tr>
                <td>
                    <input type="hidden" asp-for="Clients[i].Id" class="form-control" />
                    <input type="hidden" asp-for="Clients[i].Name" />
                    <input type="checkbox" class="checkbox-group" asp-for="Clients[i].Selected" />
                </td>
                <td>
                    @Html.DisplayFor(modelItem => Model.Clients[i].Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => Model.Clients[i].Name)
                </td>
            </tr>
        }
    </tbody>
</table>

Důležité také, zpočátku jsem měl @foreachsmyčku v HTML a to nefungovalo ..., musíte použít @for (int i = 0; i < Model.Clients.Count(); i++)smyčku namísto jinak skončíte s prázdnou seznam v OnPostAsync().