すべて選択し、jqueryとcshtmlを使用してすべてを選択解除しますか？

Question

すべてを選択するには複数のチェックボックスと2つのボタンがあり、すべて選択解除されています。私はすべて選択]ボタンをクリックしたときに

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

ので、すべてのチェックボックスをチェックする必要がありますし、すべてのボタン、それ自身（そして、すべてのボタンの選択を解除示して）選択を非表示にする、私は非選択すべてのボタンをクリックしたときには、すべてのチェックをオフにする必要があります非選択ボタンを非表示にして、すべて選択ボタンを表示する。

いずれかのチェックボックスをクリックすると、両方のボタンが表示されます。

jqueryを使用してどうすればよいですか？私が期待するもの

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

は、すべてのチェックボックスがチェックボックスのいずれかが選択されていないと他の人はそれが両方のボタンを表示する必要があります選択した場合、それは、すべてのボタンを選択して表示してはならないチェックされています。

Answer 1

はあなたがほとんどありました。この

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

を試してみてください。これを試してみてください：

$(function() { 
    $('#providerall').click(function() { 
     var checked = true; 

     $('.checkbox').prop('checked', checked); 

     $(this).hide(); //hide self 
     $('#providernoone').show(); //show other button 
    }); 

    $('#providernoone').click(function() { 
     var checked = false; 
     $('.checkbox').prop('checked', checked); 
     $(this).hide();//hide self 
     $('#providerall').show();//show other button 
    }); 

    //manage visibility of button on individual checkbox click event 
    $('.checkbox').click(function() { 

     $('#providerall').show(); 
     $('#providernoone').show(); 

     var totalCheckboxCount = $('.checkbox').length; 
     var totalCheckedInputs = $(".checkbox:checked").length; 
     if(totalCheckboxCount == totalCheckedInputs) 
     { 
      //all checkboxes are checked; so don't show select all button 
      $('#providerall').hide(); 
     } 
    }); 

}) 

個々のチェックボックスをクリックするだけで、ボタンの可視性を管理するためのコードの最後に追加作品をご確認ください。

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