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

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

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

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1519閲覧

jQueryで生成するdiv要素をcheckboxで制御したい

退会済みユーザー

退会済みユーザー

総合スコア0

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2017/10/16 06:56

編集2017/10/16 08:18

###前提・実現したいこと
jQueryでCSVを読み込み、div要素を生成します。

チェックボックス#check inputにチェックを入れた場合はclass="num1"の付いたdiv要素のみを生成し、チェックが外れた場合はclass="num0"class="num1"の両方のdiv要素を生成したいのですが、どのように書くのが宜しいでしょうか?

###現状のソースコード

javaScript

1var readCsv = { 2init: function () { 3var target = '#result'; 4var csvList; 5var insert = ''; 6 7$.ajax({ 8 url: 'csv/items.csv', 9 success: function (data) { 10 csvList = $.csv()(data); 11 12 for (var i = 1; i < csvList.length; i++) { 13 var $img = csvList[i][11]; 14 var $type = csvList[i][14]; //($typeには0もしくは1の数値が格納される) 15 var $html = '<div class="items num' + $type + '"><img src="images/' + $img + '" alt=""></div>' //加筆訂正:$imgPathを$imgに修正 16 insert += $html; 17 } 18 19 $(target).append(insert); 20 21 return (function () { 22 }()); 23 }, 24}); 25 26}, 27}; 28 29readCsv.init();

チェックボックスのhtmlはこのようなものです。

html

1<div id="check"> 2<label><input type="checkbox" class="btn"></label> 3</div>

ちなみにjQueryで生成された要素群は以下のようなものになるかと思います(デフォルト時、およびチェックボックスが外れた状態の時)。

html

1<div id="result"> 2<div class="items num0"><img src="images/gazou01.jpg" alt=""></div> 3<div class="items num1"><img src="images/gazou02.jpg" alt=""></div> 4<div class="items num0"><img src="images/gazou03.jpg" alt=""></div> 5<div class="items num1"><img src="images/gazou04.jpg" alt=""></div> 6<div class="items num1"><img src="images/gazou05.jpg" alt=""></div> 7</div>

チェックボックスが押された時は以下のようにclass="num1"のみが生成されるようにしたいです。

html

1<div id="result"> 2<div class="items num1"><img src="images/gazou02.jpg" alt=""></div> 3<div class="items num1"><img src="images/gazou04.jpg" alt=""></div> 4<div class="items num1"><img src="images/gazou05.jpg" alt=""></div> 5</div>

以上、どうぞ宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

【jQuery】フォーム部品の取得・設定まとめ - Qiita

↑これ参考に、チェックボックスがチェックされているかどうかを読み込んで、

for (var i = 1; i < csvList.length; i++) { var $img = csvList[i][11]; var $type = csvList[i][14]; //($typeには0もしくは1の数値が格納される) if(isChecked && $type == "0") { continue; } var $html = '<div class="items num' + $type + '"><img src="images/' + $imgPath + '" alt=""></div>' insert += $html; }

みたいに判定すればいいんでは?

投稿2017/10/16 07:15

tkturbo

総合スコア5572

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

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

退会済みユーザー

退会済みユーザー

2017/10/16 08:16

ご回答頂きありがとうございます。 こちらの記述の方法がダメなせいか・・再現できませんでした。 ※isChecked is not definedのエラーが出てしまいます。
tkturbo

2017/10/16 08:18

isCheckedは新しく変数宣言して、その変数にチェックボックスがチェックされているかどうかの判定を突っ込んでください。…というぐらいは読み取っていただけると思っていましたが。
退会済みユーザー

退会済みユーザー

2017/10/17 09:09

自分の無知でお手数をお掛け致しました。今後より勉強して参ります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問