मैं अपने ASP.NET MVC अनुप्रयोग में एक "सभी का चयन करें" चेकबॉक्स कैसे लागू कर सकते हैं?

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

थोड़ा मार्वे के जवाब से मार्कअप को संशोधित (तालिका में आईडी दे रही है)

कार्य डेमो →

संपादित करें:

अद्यतन संस्करण जहां 'selectAll' चेकबॉक्स सही ढंग से चेक बॉक्स की स्थिति को दर्शाता है। उदाहरण के लिए यदि आप मैन्युअल रूप से सभी चेक बॉक्स का चयन, selectAll चेकबॉक्स स्वचालित रूप से जाँच की हो जाएगी। व्यवहार को समझने के डेमो का प्रयास करें।

कोड:

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

मेरे लिए, जेरेमी के समाधान ज्यादातर काम किया, लेकिन मैं बदलने के लिए किया था .attr के साथ .prop। अन्यथा एक बार मैं एक चेकबॉक्स पर क्लिक किया ही यह "मास्टर" चेकबॉक्स पर प्रतिक्रिया बंद कर देंगे।

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

एचटीएमएल (उस्तरा) पेज में

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

महत्वपूर्ण: भी, पहली बार में मैं एक था @foreachHTML में पाश और यह काम नहीं किया ..., आप एक का उपयोग करना चाहिए @for (int i = 0; i < Model.Clients.Count(); i++)बजाय अन्यथा आप में एक रिक्त सूची से अंत पाश OnPostAsync()।