JQuery: Show/Hide Div buttons works on single but not on select all deselect -

i having issues script making whereby have list of items in table after searching may want modify these selecting them. these options in div id "projectlistbutton". script works everywhere except when deselect "selectall".

so when click radio id select all, selects , shows div. when deselect radio select not remove div.

<div id="projectlistbutton" style="display:none;">with selected: </div> <div id="data-table"> <table cellspacing='0'>     <thead>         <tr>             <th><input class="pchk" id="selectall" type="checkbox"></th>             <th>keyword</th>             <th>searches (daily)</th>             <th>seo traffic (daily)</th>             <th>competitiveness</th>             <th>seo value</th>             <th>average cpc</th>         </tr>     </thead>     <tbody>         <tr>             <td><input class="pchk" type="checkbox" name="keywords" value="example"></td>             <td>example/td>             <td>1,332</td>             <td>559</td>             <td><div style="height:15px; border:1px solid #800000; width:100%"><div style="height:15px;background:#990000; width:1.05%;"></div></td>             <td><div style="height:15px; border:1px solid #2e8ae6; width:100%"><div style="height:15px;background:#3399ff; width:3.83%;"></div></td>             <td>$15.86</td>         </tr>     </tbody> </table> </div> </section> </div>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     <script>window.jquery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>     <script src="js/plugins.js"></script>     <script src="js/main.js"></script>     <script>     function myfunction() {         document.getelementbyid("search").submit();     }     </script>      <script>         $(document).ready(function() {             $('#selectall').click(function(event) {  //on click                  if(this.checked) { // check select status                     $('.pchk').each(function() { //loop through each checkbox                         this.checked = true;  //select checkboxes class "pchk"                                    });                 }else{                     $('.pchk').each(function() { //loop through each checkbox                         $(this).prop("checked",false); //deselect checkboxes class "pchk"                                            });                          }             });          });         $('.pchk').click(function() {             if ( $('.pchk:checked').length > 0) {                 $("#projectlistbutton").show();             } else {                 $("#projectlistbutton").hide();             }         });       </script> 

i have been pulling hair out why. 1 thing note select radio has both pchk class , selectall id, causing issue?

edit: have added html well. vanojx1 solution did not work

i have check jquery code, in jquery code have found $('.pchk').click(function() { code not in $(document).ready(function() {. please put code in $(document).ready(function() {

for i.e.

  <script>     $(document).ready(function() {         $('#selectall').click(function(event) {  //on click              if(this.checked) { // check select status                 $('.pchk').each(function() { //loop through each checkbox                     this.checked = true;  //select checkboxes class "pchk"                                });             }else{                 $('.pchk').each(function() { //loop through each checkbox                     this.checked = false; //deselect checkboxes class "pchk"                                        });                      }         });         $('.pchk').click(function() {           if ( $('.pchk:checked').length > 0) {             $("#projectlistbutton").show();           } else {             $("#projectlistbutton").hide();           }         });      });   </script>