如果选中复选框，则向下滑动答案

【问题标题】：if checkbox is checked then slidedown如果选中复选框，则向下滑动
【发布时间】：2014-03-17 18:27:54
【问题描述】：

我正在处理分页，每页 10 行，分页的第一列带有复选框，这意味着每一行在第一列都有复选框，bheckbox id 名称是 id="checkboxs"。

如果任何一个复选框被选中一个或多个，我想使用名为“checkbox-tools”的 css 从上向下滑动其中一个消息

我在 jquery 中写的代码不是我所期望的，我的代码所做的是如果单击复选框然后会向上滑动，如果再次选中复选框将向上滑动不是我想要的。

我喜欢的是，如果任何一个复选框被选中然后向下滑动框，如果任何一个复选框未被选中或未选中然后向上滑动或不显示它。我该怎么做！

这是代码..

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>

【问题讨论】：

$(".checkbox-tools")[this.checked ? 'slideDown' : 'slideUp']("slow");

标签： jquery checkbox slidetoggle slidedown unchecked

【解决方案1】：

不要切换，因为你关心状态。 Toggle 会让你陷入混乱的境地。相反，在更改复选框时，查看是否有任何已选中并执行 slideDown，否则执行 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');
    }
 });

【讨论】：