Alle auswählen und Alle mit jquery und cshtml abwählen?

Question

Ich habe mehrere Kontrollkästchen und zwei Schaltflächen, um alle auszuwählen, und alle abwählen.

<div class="row"> 

     <div class="col m3"> 
      <button type="button" id="providerall" ng-click="updateSelection(-1)">Select All</button> 
     </div> 

     <div class="col m3" ng-hide="@allUnselected"> 
      <button type="button" id="providernoone" ng-click="updateSelection(-2)">Un Select All</button> 

     </div> 

    @foreach (var m in Model.Provider) 
    { 

     var attr = (m.IsSearchable) ? "checked" : ""; 
     <div class="col m3"> 
      <p class="left"> 
       <input class="checkbox" type="checkbox" id="provider+@m.Id" @attr ng-click="updateSelection(@m.Id)" /> 
       <label for="provider+@m.Id">@m.ProviderName</label> 
      </p> 
     </div> 
    } 
</div> 

so, wenn ich auf der Auswahl aller Schaltfläche klicken sollten es alle Kontrollkästchen aktivieren und sollten die Schaltfläche Alles markieren es selbst verstecken (zeigen dann Schaltfläche Auswahl aufheben), wenn ich auf Schaltfläche Auswahl aufheben klicken sollte alle Kontroll deaktivieren Kästchen und blenden Sie die Auswahl aufheben und zeigen Sie alle auswählen.

Wenn Sie auf eines der Kontrollkästchen klicken, sollten beide Schaltflächen angezeigt werden.

was soll ich mit jquery machen?

$('#providerall').click(function() { 
    var checked = true; 
    $('.checkbox').each(function() { 
     $(this).prop('checked', checked); 
    }); 
    $('#providerall').hide(); 
    $('#providernoone').show() 
}) 
$('#providernoone').click(function() { 
    var checked = false; 
    $('.checkbox').each(function() { 
     $(this).prop('checked', checked); 
    }); 
    $('#providernoone').hide(); 
    $('#providerall').show(); 
}) 

, was ich erwarte, ist alle Kontrollkästchen aktiviert ist es nicht wählen alle Taste anzeigen soll, wenn einer der Kontrollkästchen nicht aktiviert ist und andere ausgewählte sie beide Tasten zeigen.

Answer 1

versuchen diese

// on select all 
$("#providerall").click(function(){ 
    $('.checkbox').prop('checked', true); 
    $(this).hide(); 
$("#providernoone").show(); 
}); 

//on un select all 

$("#providernoone").click(function(){ 
    $('.checkbox').prop('checked', false); 
    $(this).hide(); 
    $("#providerall").show(); 
}); 

Answer 2

Sie fast da waren. Versuchen Sie dies:

Bitte überprüfen Sie das zuletzt hinzugefügte Stück Code für die Verwaltung der Sichtbarkeit der Schaltfläche beim Klicken auf ein einzelnes Kontrollkästchen.

Answer 3

It worked. thanks to vijay 

$('#providerall').click(function() { 
    var checked = true; 
    $('.checkbox').each(function() { 
     $(this).prop('checked', checked); 
    }); 
    $('#selectAllDiv').hide(); 
    $('#unSelectAllDiv').show() 
}) 
$('#providernoone').click(function() { 
    var checked = false; 
    $('.checkbox').each(function() { 
     $(this).prop('checked', checked); 
    }); 
    $('#unSelectAllDiv').hide(); 
    $('#selectAllDiv').show(); 
}) 

$('.checkbox').click(function() { 
    showAndHideButtons(); 
}); 

var showAndHideButtons = function() { 
    var totalCheckboxCount = $('.checkbox').length; 
    var totalCheckedInputs = $(".checkbox:checked").length; 
    console.log(totalCheckboxCount, totalCheckedInputs) 
    if (totalCheckboxCount != totalCheckedInputs) { 
     $('#unSelectAllDiv').show(); 
     $('#selectAllDiv').show(); 
    } 
    else if (totalCheckboxCount == totalCheckedInputs) { 
     $('#unSelectAllDiv').show(); 
     $('#selectAllDiv').hide(); 
    } 
    if (totalCheckedInputs == 0) { 
     $('#unSelectAllDiv').hide(); 
     $('#selectAllDiv').show(); 
    } 

} 
showAndHideButtons();