0

編集 -

この人たちの助けに感謝します。あなたのアドバイスを受けて、私はあなたのすべてが正しいことを理解しています。私は自分のニーズにより適したコードを使用する必要があります。問題はまだコーディングできないため、締め切りのために借りる必要があり、適切なものを見つけました1つの問題で私のニーズに。

これが私が使いたいコードです。

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

他のチェックボックスをトリガーするには、イベント ハンドラーを「すべてマーク」チェックボックスにバインドし、フィルタリング チェックボックスをトリガーします。

デモ

これは 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 に答える
0

デフォルトのチェックボックスの動作を探しているようです。通常のチェックボックスを使用して、そのサンプル ページと同様のスタイルを適用できます。JavaScript コードを使用しないでください。

于 2013-03-28T15:16:20.803 に答える