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

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

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

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

Q&A

解決済

2回答

840閲覧

HTMLのリスト絞り込み表示のリセットボタン追加

irodory

総合スコア10

JavaScript

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

0グッド

0クリップ

投稿2019/01/02 12:55

前提・実現したいこと

当方プログラム初心者です。

こちらのサイトの下記サンプルに、リセットボタンを追加したいです。
http://cly7796.net/wp/javascript/implement-the-process-of-narrowing-down-the-list/
サンプル
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index3.html

リセットボタンを押すと、セレクトボックスやチェックボックスからチェックが外れ、
かつ非表示にしていた項目が全表示になるようにしたいです。
自分でもいろいろ試してはみたのですがわからず…
どうかご教授いただきたくお願いします。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>サンプル</title> <link rel="stylesheet" href="./sample.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./sample3.js"></script> <script src="../analytics.js"></script> </head> <body> <div id="page"> <div class="serchBox"> <select name="type"> <option value="">種類を選択</option> <option value="mammals">哺乳類</option> <option value="reptiles">爬虫類</option> <option value="birds">鳥類</option> <option value="other">その他</option> </select> <select name="live"> <option value="">生活を選択</option> <option value="water">水中</option> <option value="land">陸上</option> <option value="water-and-land">水中と陸上</option> <option value="sky">空</option> </select> <select name="color"> <option value="">色を選択</option> <option value="black">黒系</option> <option value="white">白系</option> <option value="green">緑系</option> <option value="brown">茶系</option> </select> <div class="checkboxArea"> <p>大きさを選択</p> <label for="small"> <input type="checkbox" name="size" value="small" id="small" />小さい </label> <label for="middle"> <input type="checkbox" name="size" value="middle" id="middle" />中くらい </label> <label for="large"> <input type="checkbox" name="size" value="large" id="large" />大きい </label> </div> <div class="checkboxArea"> <p>名前を選択</p> <label for="dog"> <input type="checkbox" name="name" value="dog" id="dog" />イヌ </label> <label for="cat"> <input type="checkbox" name="name" value="cat" id="cat" />ネコ </label> <label for="monkey"> <input type="checkbox" name="name" value="monkey" id="monkey" />サル </label> <label for="dolphin"> <input type="checkbox" name="name" value="dolphin" id="dolphin" />イルカ </label> <label for="jellyfish"> <input type="checkbox" name="name" value="jellyfish" id="jellyfish" />クラゲ </label> <label for="penguin"> <input type="checkbox" name="name" value="penguin" id="penguin" />ペンギン </label> <label for="turtle"> <input type="checkbox" name="name" value="turtle" id="turtle" />カメ </label> <label for="redstart"> <input type="checkbox" name="name" value="redstart" id="redstart" />ジョウビタキ </label> <label for="myna"> <input type="checkbox" name="name" value="myna" id="myna" />九官鳥 </label> <label for="butterfly"> <input type="checkbox" name="name" value="butterfly" id="butterfly" />蝶 </label> <label for="crocodile"> <input type="checkbox" name="name" value="crocodile" id="crocodile" />ワニ </label> </div> </div> <ul class="list"> <li> <img src="01.jpg" width="240" height="155"> <p class="name">名前:<span class="dolphin">イルカ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="large">大きい</span></p> </li> <li> <img src="02.jpg" width="240" height="155"> <p class="name">名前:<span class="jellyfish">クラゲ</span></p> <p class="type">種類:<span class="other">その他</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="white">白系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="03.jpg" width="240" height="155"> <p class="name">名前:<span class="penguin">ペンギン</span></p> <p class="type">種類:<span class="birds">鳥類</span></p> <p class="live">生活:<span class="water-and-land">水中と陸上</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="04.jpg" width="240" height="155"> <p class="name">名前:<span class="turtle">カメ</span></p> <p class="type">種類:<span class="reptiles">爬虫類</span></p> <p class="live">生活:<span class="water-and-land">水中と陸上</span></p> <p class="color">色:<span class="green">緑系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="05.jpg" width="240" height="155"> <p class="name">名前:<span class="redstart">ジョウビタキ</span></p> <p class="type">種類:<span class="birds">鳥類</span></p> <p class="live">生活:<span class="sky">空</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="06.jpg" width="240" height="155"> <p class="name">名前:<span class="cat">ネコ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="07.jpg" width="240" height="155"> <p class="name">名前:<span class="butterfly">蝶</span></p> <p class="type">種類:<span class="other">その他</span></p> <p class="live">生活:<span class="sky">空</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="08.jpg" width="240" height="155"> <p class="name">名前:<span class="cat">ネコ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="09.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="10.jpg" width="240" height="155"> <p class="name">名前:<span class="crocodile">ワニ</span></p> <p class="type">種類:<span class="reptiles">爬虫類</span></p> <p class="live">生活:<span class="water-and-land">水中と陸上</span></p> <p class="color">色:<span class="green">緑系</span></p> <p class="size">大きさ:<span class="large">大きい</span></p> </li> <li> <img src="11.jpg" width="240" height="155"> <p class="name">名前:<span class="monkey">サル</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="12.jpg" width="240" height="155"> <p class="name">名前:<span class="myna">九官鳥</span></p> <p class="type">種類:<span class="birds">鳥類</span></p> <p class="live">生活:<span class="sky">空</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="13.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="white">白系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="14.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> </ul> </div> </body>

該当のソースコード

$(function() { $(document).on('change', '.serchBox select, .serchBox input[type=checkbox]', function() { filter_list(); }); // リストを絞り込む関数 function filter_list() { var lists = $('.list li'); lists.show(); // selectの絞り込み for (var i = 0; i < $('.serchBox select').length; i++) { // 絞り込みの項目を取得 var item = $('.serchBox select').eq(i).attr('name'); // 絞り込みの対象を取得 var target = $('.serchBox select').eq(i).val(); if(target != '') { for (var j = 0; j < lists.length; j++) { // 絞り込み対象でない場合は非表示 if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) { lists.eq(j).hide(); } }; } } // checkboxの絞り込み for (var i = 0; i < $('.serchBox .checkboxArea').length; i++) { // 絞り込みの項目を取得 var item = $('.serchBox .checkboxArea').eq(i).find('input:checkbox').attr('name'); // 絞り込みの対象を取得 var target = []; $('[name=' + item + ']:checked').each(function() { target.push($(this).val()); }); if(target.length) { for (var j = 0; j < lists.length; j++) { // 絞り込み対象かどうかを調べる var showCheck = false; for (var k = 0; k < target.length; k++) { if(lists.eq(j).find('.' + item).find('span').hasClass(target[k])) { showCheck = true; } } // 絞り込み対象でない場合は非表示 if(!showCheck) { lists.eq(j).hide(); } }; } } } });

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

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

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

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

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

bochan2

2019/01/02 14:05

よくここまで頑張りましたね! 動作させたときにどの様になるかを記述していただくと解決の役に立つと思います
irodory

2019/01/02 14:22

ありがとうございます! 記述したのはサンプルそのままなんです。すみません。 上記のサンプルでセレクトボックスやチェックボックスにチェックを入れると、HTMLで書いてあるリストの該当項目だけ表示されるようになっています。 それに、リセットボタンを追加してセレクトボックスとチェックボックスを初期値に戻し、かつHTMLで非表示にされた項目も全部表示されるようにしたいです。 どうかよろしくお願いします。
guest

回答2

0

自己解決

作成者様ご本人が回答してくださいました。
下記サイトのコメント欄を参照ください。
http://cly7796.net/wp/javascript/implement-the-process-of-narrowing-down-the-list/

投稿2019/01/12 05:44

irodory

総合スコア10

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

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

0

<div> ~~~ </div><form></form>の間に入れて最後に<input type="reset" value="リセット">を入れればいいのでは?
サンプル

###追記 (12/19)
かなり強引ですがサンプルのようにすればできます。
<input type="reset" value="リセット">ではなく<input type="reset" value="リセット" onclick="window.location.reload();">にするとできます。

投稿2019/01/03 23:35

編集2019/01/04 03:21
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

irodory

2019/01/04 02:10

サンプルありがとうございます! リセットボタンでチェックボックス等はチェック外れますが、それと同時に非表示にしているコンテンツを全表示するにはどうしたら良いか教えていただけないでしょうか。
退会済みユーザー

退会済みユーザー

2019/01/04 03:07 編集

表示されませんか? 私の環境では全て表示されましたが... 追記 表示されませんでした..
irodory

2019/01/04 07:20

度々ありがとうございます! ページをリロードするという発想はありませんでした! 勉強になります! ワガママですが、ページをリロードせずに、リセットボタンを押すと全表示する方法あるでしょうか…。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問