0

编辑 -

感谢您对这些人的帮助，接受您的建议一个问题满足我的需求。

这是我要使用的代码。

http://jsfiddle.net/magicalex/FmQvc/

HTML

<input data-bedrooms="1" type="checkbox">1 bedroom<br>
<input data-bedrooms="2" type="checkbox">2 bedrooms<br>
<input data-bedrooms="3" type="checkbox">3 bedrooms<br><br>
<ul>
<li data-bedrooms="1">1 bedroom apartment</li>
<li data-bedrooms="1">1 bedroom apartment</li>
<li data-bedrooms="3">3 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="3">3 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="1">1 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
</ul>

Javascript

$('input').change(function() {
  var allchecked=0; 
  $('input').each(function() {
    var checked;
    if (checked = $(this).attr('checked')) {allchecked++};
    var numberofrooms = $('li[data-bedrooms='+$(this).data('bedrooms')+']');
    checked ?  numberofrooms.show('slow'): numberofrooms.hide('slow');
  });
  if(allchecked==0){$('li').show('slow');}
});

当您启动它时，它会立即将所有结果显示到复选框中，然后在用户勾选相关结果的复选框时过滤它们，然后当您取消勾选每个框时，结果都会再次显示。谁能告诉我如何扭转这一点，在启动时隐藏所有结果，并在没有勾选复选框时再次隐藏？

谢谢，

4

2 回答 2

0

您似乎正在寻找默认的复选框行为。您可以使用常规复选框并应用类似于该示例页面中的样式。不要使用他们的 javascript 代码。

于 2013-03-28T15:16:20.803 回答
0

为了触发其他复选框，您可以将事件处理程序绑定到“标记所有”复选框并使其触发过滤复选框。

演示

这是关于 jsbin 的演示。

html:

给定以下html：

<div class="checkbox-wrapper">
  <input class="checkbox-all" type="checkbox">
  <input class="checkbox" type="checkbox">
  <input class="checkbox" type="checkbox">
  <input class="checkbox" type="checkbox">
  <input class="checkbox-all" type="checkbox">
  ...
</div>

Javascript：

您可以使用此 Javascript 来启动触发其他复选框的复选框：

$(function(){ // Same as $(document).ready(function(){});

  // Cache variables
  var list, $this, checked;

  // Bind event handler for check all checkbox
  $('.checkbox-wrapper').on('click', '.checkbox-all', function(){

    // Get all checkboxes following the clicked "mark all"
    list = $(this).nextUntil('.checkbox-all', '.checkbox');

    // See if the current all checkbox is "chceked"
    checked = $(this).prop('checked');

    list.each(function(){

      $this = $(this);

      // Trigger the click event          
      if ( checked ){
        if ( !$this.prop('checked') )
          $(this).trigger('click');
      } else {
        if ( $this.prop('checked') )
          $(this).trigger('click');
      }

    });

  });

});

这将与您引用的脚本一起用于切换元素。

于 2013-03-28T16:10:20.830 回答