Πώς μπορώ να εφαρμόσουν ένα πλαίσιο ελέγχου «Select All» στο ASP.NET MVC app μου;

jQuery ( ΕΠΙΜΕΛΕΙΑ για εναλλαγή ελέγχου / αποεπιλογή όλων):

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

Ο λόγος που είχα να κάνω μια click()συνέχεια ελέγξτε checkedτην κατάσταση είναι, γιατί αν προσπαθήσετε να « toggle» ένα πλαίσιο ελέγχου, το πλαίσιο ελέγχου που ανάβουν δεν θα διατηρήσει ελεγχθεί το καθεστώς του. Με αυτό τον τρόπο διατηρεί την ιδιότητα έλεγχο και την αποτελεσματική εναλλαγή.

HTML:

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

KingNestor:

Μπορείτε, επίσης, θα πρέπει αυτό το σύνδεσμο (αν δεν το έχετε ήδη ανακαλύψει):

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

Αν και οι απαντήσεις δημοσιεύονται στο παρελθόν θα λειτουργήσει, θα αντιμετωπίσετε προβλήματα αν έχετε περισσότερα από ένα σετ πλαίσια ελέγχου σε μία μόνο σελίδα.

Αυτή η μορφή θα λειτουργήσει ανεξάρτητα από:

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

και το σενάριο ...

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

Ελαφρώς τροποποίηση σήμανσης από την απάντηση Marve του (δίνοντας ID στον πίνακα)

Εργασίας Demo →

ΕΠΕΞΕΡΓΑΣΙΑ:

Ενημερωμένη έκδοση όπου το πλαίσιο ελέγχου «selectAll» αντικατοπτρίζει ορθά την κατάσταση των πλαισίων ελέγχου. Για παράδειγμα, εάν επιλέξετε όλα τα πλαίσια ελέγχου με το χέρι, πλαίσιο ελέγχου selectAll θα πάρει αυτόματα ελέγχονται. Δοκιμάστε το demo για να καταλάβει τη συμπεριφορά.

Κώδικας:

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

jQuery σας θα μπορούσε να είναι τόσο απλό όσο αυτό:

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

Αυτό θα κρατήσει όλα τα επιμέρους πλαίσια ελέγχου η ίδια με εκείνη που «ελέγχει όλα»

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

Αυτό θα κρατήσει το «ελέγχει όλα» ένα σε συγχρονισμό με το εάν ή όχι οι επιμέρους πλαίσια ελέγχου είναι στην πραγματικότητα όλα ελέγχονται ή όχι

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

Δοκιμάστε το για τον πίνακα HTML.

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

Γραφή:

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

Για μένα, λύση Jeremy ως επί το πλείστον εργαστεί, αλλά έπρεπε να αντικατασταθεί .attr με .prop. Διαφορετικά, αφού την έχω μονό κλικ σε ένα πλαίσιο ελέγχου, θα σταματήσει να αντιδρά με το πλαίσιο ελέγχου «master».

στο (κύρια σελίδα) _Layout.cshtml

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

σε αναφορά .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);
        }
    });
}

στην 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>

ΣΗΜΑΝΤΙΚΟ: Επίσης, κατά την πρώτη είχα μια @foreachθηλιά στην HTML και δεν λειτούργησε ..., πρέπει να χρησιμοποιήσετε ένα @for (int i = 0; i < Model.Clients.Count(); i++)βρόχο αντί αλλιώς μπορεί να καταλήξετε με ένα άδειο Κατάλογο OnPostAsync().