Question

编辑 -

感谢您对这些人的帮助，接受您的建议我理解您的一切正确，我应该使用更符合我需求的代码，问题是我不能编码一个但是因为截止日期我需要借一个而且我找到一个适合我需要的问题。

这是我想要使用的代码。

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');}
});

启动时，它会立即向复选框显示所有结果，然后在用户勾选相关结果的复选框时过滤它们，然后当您取消勾选每个框时，结果全部再次显示。任何人都可以告诉我如何扭转这种情况，在启动时隐藏所有结果并在没有勾选复选框时再次隐藏？

谢谢，

Answer 1

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

Answer 2

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

演示

这是demo on 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');
      }

    });

  });

});

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

Jquery编辑代码只选择一个复选框

2 个答案:

演示

HTML：

使用Javascript：