質問編集履歴

3 補足のため、サンプルの記述を変更

takatouaya

takatouaya score 1

2016/08/05 14:16  投稿

jQueryを使用した複数条件での絞り込み
jQueryを使用して、要素の絞り込みを行いたいです。
最初はすべての要素が表示されており、チェックボックスにチェックをつける(または外す)ことで、
そのチェックボックスについているidと同じclassを持つ要素の表示・非表示を行いたいと考えています。
下記アドレスで紹介されているものと同じような形だったので、こちらを参考にしてみました。
http://jsdo.it/carl_marie/jquery_hide_rows
ですが、今回、ANDだけでなくORでの条件も必要になってしまい、
例えば、
「attribute01」「attribute02」「type03」「type06」「option03」「option02」
にチェックがついている場合は、
「attribute01」もしくは「attribute02」のclassを持つものの中から「type03」「type06」「option03」「option02」のいずれかのclassを持つものを表示
というようにしたいです。
```HTML
<div id="search">
   <ul id="attribute">
       <li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li>
       <li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li>
       <li><label><input type="checkbox" id="attribute02" class="sort">attribute02</label></li>
       <li><label><input type="checkbox" id="attribute03" class="sort">attribute03</label></li>
       <li><label><input type="checkbox" id="attribute04" class="sort">attribute04</label></li>
       <li><label><input type="checkbox" id="attribute05" class="sort">attribute05</label></li>
   </ul>
   <ul id="type">
       <li><label><input type="checkbox" id="type01" class="sort">type01</label></li>
       <li><label><input type="checkbox" id="type02" class="sort">type02</label></li>
       <li><label><input type="checkbox" id="type03" class="sort">type03</label></li>
       <li><label><input type="checkbox" id="type04" class="sort">type04</label></li>
       <li><label><input type="checkbox" id="type05" class="sort">type05</label></li>
       <li><label><input type="checkbox" id="type06" class="sort">type06</label></li>
       <li><label><input type="checkbox" id="type07" class="sort">type07</label></li>
       <li><label><input type="checkbox" id="type08" class="sort">type08</label></li>
   </ul>
   <ul id="option">
       <li><label><input type="checkbox" id="option01" class="sort">option01</label></li>
       <li><label><input type="checkbox" id="option02" class="sort">option02</label></li>
       <li><label><input type="checkbox" id="option03" class="sort">option03</label></li>
       <li><label><input type="checkbox" id="option04" class="sort">option04</label></li>
       <li><label><input type="checkbox" id="option05" class="sort">option05</label></li>
       <li><label><input type="checkbox" id="option06" class="sort">option06</label></li>
       <li><label><input type="checkbox" id="option07" class="sort">option07</label></li>
       <li><label><input type="checkbox" id="option08" class="sort">option08</label></li>
       <li><label><input type="checkbox" id="option09" class="sort">option09</label></li>
       <li><label><input type="checkbox" id="option10" class="sort">option10</label></li>
   </ul>
</div><!-- /.#search -->
<ul id="list">
   <li class="attribute01 type01 option03"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute03 type03 option01"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute02 type05 option04"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute03 type03 type02 option01"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute02 type05 type03 option04 option05"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute05 type06 option06"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute03 type07 option05"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute04 type04 option07"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute03 type02 option08"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute04 type08 option09"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute01 type03 option01"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute02 type02 option10"><a href="#"><img src="sample.jpg"></a></li>
</ul>
```
```CSS
#list [class*="hidden-"] {
   display: none !important;
}
```
```jQuery
$(function (){
   var $filter_tags =['attribute01','attribute02','attribute03','attribute04','attribute05','type01','type02','type03','type04','type05','type06','type07','type08','option01','option02','option03','option04','option05','option06','option07','option08','option09','option10'];
   var $filter_all = $('#all');
   
   //チェックボックスがクリックされた時
   $("#search li label input").click(function() {
       
       $(this).parent().toggleClass("selected");
       
       $.each($filter_tags, function() {
           if($('#' + this).is(':checked')) {
                        $("#list li:not(." + this + ")").addClass('hidden-not-' + this);
                        $filter_all.prop('checked',false).parent().removeClass("selected");
               }
           else if($('#' + this).not(':checked')) {
                        $("#list li:not(." + this + ")").removeClass('hidden-not-' + this);
               }
       });
       
       //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける
       if ($('.sort:checked').length == 0 ){
           $filter_all.prop('checked',true).parent().addClass("selected");
           $(".sort").parent().removeClass("selected");
       };
   });   
});
```
ORにするためにはどのようにすればいいのか、全く見当がつかず…
お手数をおかけしますが、よろしくお願いいたします。
  • jQuery

    8341 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2 ID名の間違い

takatouaya

takatouaya score 1

2016/08/05 13:51  投稿

jQueryを使用した複数条件での絞り込み
jQueryを使用して、要素の絞り込みを行いたいです。
最初はすべての要素が表示されており、チェックボックスにチェックをつける(または外す)ことで、
そのチェックボックスについているidと同じclassを持つ要素の表示・非表示を行いたいと考えています。
下記アドレスで紹介されているものと同じような形だったので、こちらを参考にしてみました。
http://jsdo.it/carl_marie/jquery_hide_rows
ですが、今回、ANDだけでなくORでの条件も必要になってしまい、
例えば、
「attribute01」「attribute02」「type03」「type06」「option03」「option02」
にチェックがついている場合は、
「attribute01」もしくは「attribute02」のclassを持つものの中から「type03」「type06」「option03」「option02」のいずれかのclassを持つものを表示
というようにしたいです。
```HTML
<div id="search">
   <ul id="attribute">
       <li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li>
       <li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li>
       <li><label><input type="checkbox" id="attribute02" class="sort">attribute02</label></li>
       <li><label><input type="checkbox" id="attribute03" class="sort">attribute03</label></li>
       <li><label><input type="checkbox" id="attribute04" class="sort">attribute04</label></li>
       <li><label><input type="checkbox" id="attribute05" class="sort">attribute05</label></li>
   </ul>
   <ul id="type">
       <li><label><input type="checkbox" id="type01" class="sort">type01</label></li>
       <li><label><input type="checkbox" id="type02" class="sort">type02</label></li>
       <li><label><input type="checkbox" id="type03" class="sort">type03</label></li>
       <li><label><input type="checkbox" id="type04" class="sort">type04</label></li>
       <li><label><input type="checkbox" id="type05" class="sort">type05</label></li>
       <li><label><input type="checkbox" id="type06" class="sort">type06</label></li>
       <li><label><input type="checkbox" id="type07" class="sort">type07</label></li>
       <li><label><input type="checkbox" id="type08" class="sort">type08</label></li>
   </ul>
   <ul id="option">
       <li><label><input type="checkbox" id="option01" class="sort">option01</label></li>
       <li><label><input type="checkbox" id="option02" class="sort">option02</label></li>
       <li><label><input type="checkbox" id="option03" class="sort">option03</label></li>
       <li><label><input type="checkbox" id="option04" class="sort">option04</label></li>
       <li><label><input type="checkbox" id="option05" class="sort">option05</label></li>
       <li><label><input type="checkbox" id="option06" class="sort">option06</label></li>
       <li><label><input type="checkbox" id="option07" class="sort">option07</label></li>
       <li><label><input type="checkbox" id="option08" class="sort">option08</label></li>
       <li><label><input type="checkbox" id="option09" class="sort">option09</label></li>
       <li><label><input type="checkbox" id="option10" class="sort">option10</label></li>
   </ul>
</div><!-- /.#search -->
<ul id="list">
   <li class="attribute01 type01 option03"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute03 type03 option01"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute02 type05 option04"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute05 type06 option06"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute03 type07 option05"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute04 type04 option07"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute03 type02 option08"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute04 type08 option09"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute01 type03 option01"><a href="#"><img src="sample.jpg"></a></li>
   <li class="attribute02 type02 option10"><a href="#"><img src="sample.jpg"></a></li>
</ul>
```
```CSS
#list [class*="hidden-"] {
   display: none !important;
}
```
```jQuery
$(function (){
   var $filter_tags =['attribute01','attribute02','attribute03','attribute04','attribute05','type01','type02','type03','type04','type05','type06','type07','type08','option01','option02','option03','option04','option05','option06','option07','option08','option09','option10'];
   var $filter_all = $('#all');
   
   //チェックボックスがクリックされた時
   $("#search li label input").click(function() {
       
       $(this).parent().toggleClass("selected");
       
       $.each($filter_tags, function() {
           if($('#' + this).is(':checked')) {
                        $("#monster-list li:not(." + this + ")").addClass('hidden-not-' + this);
                        $("#list li:not(." + this + ")").addClass('hidden-not-' + this);
                        $filter_all.prop('checked',false).parent().removeClass("selected");
               }
           else if($('#' + this).not(':checked')) {
                        $("#monster-list li:not(." + this + ")").removeClass('hidden-not-' + this);
                        $("#list li:not(." + this + ")").removeClass('hidden-not-' + this);
               }
       });
       
       //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける
       if ($('.sort:checked').length == 0 ){
           $filter_all.prop('checked',true).parent().addClass("selected");
           $(".sort").parent().removeClass("selected");
       };
   });   
});
```
ORにするためにはどのようにすればいいのか、全く見当がつかず…
お手数をおかけしますが、よろしくお願いいたします。
  • jQuery

    8341 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 初心者アイコンのつけ忘れ

takatouaya

takatouaya score 1

2016/08/05 12:45  投稿

jQueryを使用した複数条件での絞り込み
jQueryを使用して、要素の絞り込みを行いたいです。
最初はすべての要素が表示されており、チェックボックスにチェックをつける(または外す)ことで、
そのチェックボックスについているidと同じclassを持つ要素の表示・非表示を行いたいと考えています。
下記アドレスで紹介されているものと同じような形だったので、こちらを参考にしてみました。
http://jsdo.it/carl_marie/jquery_hide_rows
ですが、今回、ANDだけでなくORでの条件も必要になってしまい、
例えば、
「attribute01」「attribute02」「type03」「type06」「option03」「option02」
にチェックがついている場合は、
「attribute01」もしくは「attribute02」のclassを持つものの中から「type03」「type06」「option03」「option02」のいずれかのclassを持つものを表示
というようにしたいです。
```HTML
<div id="search">
<ul id="attribute">
<li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li>
<li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li>
<li><label><input type="checkbox" id="attribute02" class="sort">attribute02</label></li>
<li><label><input type="checkbox" id="attribute03" class="sort">attribute03</label></li>
<li><label><input type="checkbox" id="attribute04" class="sort">attribute04</label></li>
<li><label><input type="checkbox" id="attribute05" class="sort">attribute05</label></li>
</ul>
<ul id="type">
<li><label><input type="checkbox" id="type01" class="sort">type01</label></li>
<li><label><input type="checkbox" id="type02" class="sort">type02</label></li>
<li><label><input type="checkbox" id="type03" class="sort">type03</label></li>
<li><label><input type="checkbox" id="type04" class="sort">type04</label></li>
<li><label><input type="checkbox" id="type05" class="sort">type05</label></li>
<li><label><input type="checkbox" id="type06" class="sort">type06</label></li>
<li><label><input type="checkbox" id="type07" class="sort">type07</label></li>
<li><label><input type="checkbox" id="type08" class="sort">type08</label></li>
</ul>
<ul id="option">
<li><label><input type="checkbox" id="option01" class="sort">option01</label></li>
<li><label><input type="checkbox" id="option02" class="sort">option02</label></li>
<li><label><input type="checkbox" id="option03" class="sort">option03</label></li>
<li><label><input type="checkbox" id="option04" class="sort">option04</label></li>
<li><label><input type="checkbox" id="option05" class="sort">option05</label></li>
<li><label><input type="checkbox" id="option06" class="sort">option06</label></li>
<li><label><input type="checkbox" id="option07" class="sort">option07</label></li>
<li><label><input type="checkbox" id="option08" class="sort">option08</label></li>
<li><label><input type="checkbox" id="option09" class="sort">option09</label></li>
<li><label><input type="checkbox" id="option10" class="sort">option10</label></li>
</ul>
</div><!-- /.#search -->
<ul id="list">
<li class="attribute01 type01 option03"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute03 type03 option01"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute02 type05 option04"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute05 type06 option06"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute03 type07 option05"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute04 type04 option07"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute03 type02 option08"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute04 type08 option09"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute01 type03 option01"><a href="#"><img src="sample.jpg"></a></li>
<li class="attribute02 type02 option10"><a href="#"><img src="sample.jpg"></a></li>
</ul>
```
```CSS
#list [class*="hidden-"] {
display: none !important;
}
```
```jQuery
$(function (){
var $filter_tags =['attribute01','attribute02','attribute03','attribute04','attribute05','type01','type02','type03','type04','type05','type06','type07','type08','option01','option02','option03','option04','option05','option06','option07','option08','option09','option10'];
var $filter_all = $('#all');
//チェックボックスがクリックされた時
$("#search li label input").click(function() {
$(this).parent().toggleClass("selected");
$.each($filter_tags, function() {
if($('#' + this).is(':checked')) {
$("#monster-list li:not(." + this + ")").addClass('hidden-not-' + this);
$filter_all.prop('checked',false).parent().removeClass("selected");
}
else if($('#' + this).not(':checked')) {
$("#monster-list li:not(." + this + ")").removeClass('hidden-not-' + this);
}
});
//チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける
if ($('.sort:checked').length == 0 ){
$filter_all.prop('checked',true).parent().addClass("selected");
$(".sort").parent().removeClass("selected");
};
});
});
```
ORにするためにはどのようにすればいいのか、全く見当がつかず…
お手数をおかけしますが、よろしくお願いいたします。
  • jQuery

    8341 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る