title: Select all check boxes and show control buttons in bootstrap
body: <p>I've been able to show/hide a div after checking any checkboxes. I've also been able to create a check all button that selects all of the checkboxes. The problem now is how will I  link the two together? </p>
  
  <p>When I hit check all, it doesn't show/hide the div I want to show/hide but works when you select each individually. <a href="http://iambuttonbag.com/wellpledge/support.text.php" rel="nofollow">Here is the page url</a></p>
  
  <p>Bonus: If anyone can also make it so that the "select all" button changes to "deselect all" Thanks, community!</p>
  
  <p>The script:</p>
  
  <pre><code>&lt;script&gt;
  $('input[type=checkbox]').change(
  function(){
     if($('input[type=checkbox]').is(':checked')){
            // if any of the checkboxes are checked then make the area visible
            $('.send-control').fadeIn(); 
     }else{
            // only if all are unchecked will this fire and hide the area
            $('.send-control').fadeOut();
     }
  });
  
  $('#toggle-all').click(function() {
  $('input[type="checkbox"]').prop('checked',true);
  });
  &lt;/script&gt;
  </code></pre>