質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

5821閲覧

checkboxが:checkedの時にfilter()の対象を絞り込みたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/10/16 02:36

編集2017/10/16 03:28

###前提・実現したいこと
表題の通りなのですが、チェックボックスにチェックが入ったときに、
jQueryの.filter()の対象を絞り込みたいです。

###該当のソースコード
まず、こちらがソート対象となるHTMLです。

html

1<div id="itemArea"> 2<div class="items banana type1" data-size="40">バナナA</div> 3<div class="items banana type0" data-size="10">バナナB</div> 4<div class="items ringo type0" data-size="25">リンゴA</div> 5<div class="items ringo type1" data-size="5">リンゴB</div> 6<div class="items ringo type0" data-size="30">リンゴC</div> 7<div class="items melon type1" data-size="18">メロンA</div> 8</div>

そして、上記のhtmlに対して、data-size=""の値が21以上の場合に、
非表示(hide)とするJQueryが存在します。

JavaScript

1var $elm = $('#itemArea .items'); 2var $num = '20'; 3 4$elm.show().filter(function () { 5 return $(this).data('size') > $num; 6}).hide();

最後にチェックボックスのhtmlです。
checkedになると、先のhtmlにある.type1のみが上記jQueryの.filter()の対象となるようにしたいです。

html

1<div id="Btn"> 2<label><input type="checkbox" class="btnType"></label> 3</div>

ちなみに、チェックボックスがcheckedの状態だと、.type1のみが表示され、
それ以外は非表示(display:none)となる別のJSが存在します。

JavaScript

1$('#Btn .btnType').change(function () { 2 if ($(this).is(':checked')) { 3 $($target).hide(); 4 } else { 5 $($target).show(); 6 } 7});

以上、何卒宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/10/16 02:45

「$hoge01・$hoge02・$hoge03がtrueだった場合」とありますが、samleがそうなっていないので意味が噛み合いません
yambejp

2017/10/16 03:09

ついでに「$hoge01・$hoge02・$hoge03がtrueだった場合」とありますがOR検索していますが「どれかがtrue」であればいいのでしょうか?普通によむと全てがtrueでないといけないように感じますが
退会済みユーザー

退会済みユーザー

2017/10/16 03:30

内容が分かりづらく大変申し訳ございません。コードを加筆修正致しました。
guest

回答2

0

ベストアンサー

追記された内容から分かる範囲で

「#Btn .btnType」が変わる度に「#itemArea」をつけたり消したり
($targetに関する情報がないので)

javascript

1$(function(){ 2 $('#Btn .btnType').on('change',function () { 3 $($('#itemArea')).toggle($(this).prop('checked')); 4 }).trigger('change'); 5});

HTML

1<div id="Btn"> 2<label><input type="checkbox" class="btnType"></label> 3</div> 4<div id="itemArea"> 5<div class="items banana type1">バナナ</div> 6<div class="items ringo type0">リンゴ</div> 7<div class="items melon type1">メロン</div> 8<div class="items ringo type1">リンゴ</div> 9<div class="items ringo type0">リンゴ</div> 10<div class="items banana type0">バナナ</div> 11</div>

投稿2017/10/16 03:40

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/10/16 06:57

ご回答いただき大変ありがとうございます。 お教え頂いたこちらのソースコードを参考にさせて頂きます。
guest

0

こういうことでしょうか。

JavaScript

1return ( $hoge01 == true || $hoge02 == true || $hoge03 == true ) && ( $( '#Btn .btnType' ).is( ':checked' ) ? $( this ).hasClass( 'type1' ) : true );

【.is() | jQuery API Documentation】
http://api.jquery.com/is/

【.hasClass() | jQuery API Documentation】
https://api.jquery.com/hasclass/

投稿2017/10/16 02:47

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/16 03:30

あー、質問が書き換わった・・・。
退会済みユーザー

退会済みユーザー

2017/10/16 03:32

ご回答ありがとうございます。ここに記載のコードが実際のコードと若干異なっていたためか、お教えいただいた方法では再現できませんでした。内容を加筆致しましたので、もしよろしければご高覧頂けますと幸いです。何卒宜しくお願い致します。
kei344

2017/10/16 03:36

回答が付いた質問を書き換えると回答とかみ合わなくなるので、そういう場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるように次回からはしてください。
退会済みユーザー

退会済みユーザー

2017/10/16 04:03

申し訳ございません。その通りですね。 以後気を付けるように致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問