if checkbox is checked then slidedown

Question

I'm working on pagination, and they are 10 rows per page, the first column of pagination is comes with checkbox meaning each row have checkbox in first column, the bheckbox id name is id="checkboxs".

if any of checkbox are checked one or more, I want to slidedown one of message from the top to down using css called "checkbox-tools"

I wrote in jquery code is not what i expect, what my code do is if clicked on checkbox then will slide up and if checked again on checkbox will slide up is not what I want.

what I like to have is that if ANY of checkbox are checked then slidedown box, if any of checkbox are not check or unchecked then slide up or not show it. how can i do that!

here is code..

css..

 .checkbox-tools
    {
        background-color: #CCC;
        height: 400px;
        width: 1000px;
        border: 1px solid #333;
        position: absolute;
        z-index: 100;
        bottom: 100px;
        padding: 0;
        margin: 0;
        left: 100px;
        display:none;
    }

jquery ...

$(":checkbox").change(function(){
    $(".checkbox-tools").slideToggle("slow");


  });  });

php....

<div class="checkbox-tools">
  <div id="cancel"><a class="button" href="#"><span class="print-icon">cancel</span></a></div> 
  <div id="pagecontent">
message from checkbox..
  </div>

Answer 1

Don't do toggle since you care about the state. Toggle can get you into confusing situations. Instead, on change of a checkbox, see if there are any checked and do the slideDown, else do the slideUp

$(':checkbox').change(function() {
    // use the :checked selector to find any that are checked
    if ($(':checked').length) {
        $('.checkbox-tools').slideDown('slow');
    } else {
        $('.checkbox-tools').slideUp('slow');
    }
 });