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

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

新規登録して質問してみよう
ただいま回答率
85.53%
JavaServer Faces

JavaServer Faces(JSF)はJavaをベースとしたコンポーネントベースのwebアプリケーション開発用のフレームワークです。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1035閲覧

チェックボックス、もしくはラジオボタンを用いた絞り込み検索でinput type=rangeのような挙動で行いたい

Hiyoko_mochi

総合スコア30

JavaServer Faces

JavaServer Faces(JSF)はJavaをベースとしたコンポーネントベースのwebアプリケーション開発用のフレームワークです。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/02/06 09:01

編集2023/02/14 17:02

前提

Wordpressの記事絞り込み検索にて、このページの専有面積部分ような事をしたいと思い錯誤しています。

実現したいこと

初めにpriceと言うカテゴリーを作り、中に

「100万円、200万円、300万円、400万円、500万円、600万円、700万円、800万円、900万円、1000万円」

上記のように計12個の分類を作成をしました。
※スラッグがそれぞれ「price100~price1000」で設定しています。

これを元に絞り込み検索フォームを作成しようとした所、範囲検索(下減なしから500万円まで)などを実装する方法及びValue内を表示させる所で躓いてしまっております。

試した事①

初めに範囲検索の定番でもあるinput type="range"を使ってみましたが、そもそも値の部分が数字でしか設定が行えなかった為
この方法に沿って行ってみましたが

<div>総額:<span class="price_text"></span></div> <input type="range" list="price-datalist" class="price-data" step="12"> <datalist id="price-datalist"> <option value="">下限なし</option> <option value="price100">100万円</option> <option value="price200">200万円</option> <option value="price300">300万円</option> <option value="price400">400万円</option> <option value="price500">500万円</option> <option value="price600">600万円</option> <option value="price700">700万円</option> <option value="price800">800万円</option> <option value="price900">900万円</option> <option value="price1000">1000万円</option> <option value="pricemax">上限なし</option> </datalist> <script> function render (output, value) { output.innerHTML = value } const input = document.querySelector('.price-data') const output = document.querySelector('.price_text') input.addEventListener('input', function (e) { render(output, e.target.value) }, false) render(output, input.value) </script>

上記のように試してみましたが値を拾って貰えず、また<span class="price_text"></span>の部分も50と言った風に出てしまい、Value内容やラベル内容の表示もされませんでした。

rangeですと、やりたい事が行えないと思い、次にチェックボックスを用いた方法で下記方法を試してみました。

試した事②

<div class="sample"> <input type="checkbox" name="s3" id="select1" value="" checked=""> <label for="select1"></label> <input type="checkbox" name="s3" id="select2" value="price100"> <label for="select2"></label> <input type="checkbox" name="s3" id="select3" value="price200"> <label for="select3"></label> <input type="checkbox" name="s3" id="select4" value="price300"> <label for="select4"></label> <input type="checkbox" name="s3" id="select5" value="price400"> <label for="select5"></label> <input type="checkbox" name="s3" id="select6" value="price500"> <label for="select6"></label> <input type="checkbox" name="s3" id="select7" value="price600"> <label for="select7"></label> <input type="checkbox" name="s3" id="select8" value="price700"> <label for="select8"></label> <input type="checkbox" name="s3" id="select9" value="price800"> <label for="select9"></label> <input type="checkbox" name="s3" id="select10" value="price900"> <label for="select10"></label> <input type="checkbox" name="s3" id="select11" value="price1000"> <label for="select11"></label> <input type="checkbox" name="s3" id="select12" value=""> <label for="select12"></label> </div> <style> .sample input{ display: none; } .sample label{ display: inline-block; float: left; cursor: pointer; width: 80px; height: 30px; margin: 0; padding: 0 5px; border-right: 0px solid #abb2b7; background: #ccct; font-size: 14px; text-align: center; line-height: 1; transition: .2s; } .sample label:first-of-type{ border-radius: 3px 0 0 3px; } .sample label:last-of-type{ border-right: 0px; border-radius: 0 3px 3px 0; } .sample input[type="radio"]:checked + label { background: #fff000; position: relative; color: #fff; } </style>

この方法ですと、1つ越えて選択をしてしまったり、また1番高い値をチェックしてもそれより低い部分(左)までチェックが自動で出来なかったので、うまくいきませんでした。

理想は、このページの築年数部分のように、rangeを使ったような挙動でチェックボックスなどで同等の動きが出来き、別箇所にValue内容を表示できるような仕組みなのですが、試した事以外で方法などが見つからず躓いております。

お手数では御座いますが、お知恵お借りできれば幸いです。

完全にドツボにはまってしまっており、まとまりのない文章で申し訳ございません。

よろしくお願いいたします。

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

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

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

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

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

Cocode

2023/02/06 22:54

すみませんご質問の内容が私の理解不足で正確に解釈できている自信がないのですが、 https://jsfiddle.net/4xynrsgu/2/ ↑こういうことでしょうか…?
Cocode

2023/02/06 23:14

ご質問には「このページの築年数部分」とありますが、もしかして「専有面積」の部分が実装したいものでしょうか…?
KazuhiroHatano

2023/02/07 07:30

> それより低い部分(左)までチェックが自動 これは、たとえばprice500の選択は、price100〜price400も選択していることにしたいということですか?
Hiyoko_mochi

2023/02/07 07:52

>Cocode様 コメントありがとうございます。 Cocode様の仰っている事と同じ事を最初行っていたのですが、これですとWordpressで絞り込み検索を行う上で数字しかValueに入力できず、スラッグでの検索ができない・下限無し・上限なしと言う所まで出来なかったので、次にチェックボックスやラジオボタンを用いた方法を試してみたのですが、うまくいかず・・・と言う流れです; >KazuhiroHatano様 コメントありがとうございます。 仰る通りです。 範囲検索というと語弊が出てしまいそうですが、input rangeですとValueの面で弊害が出てしまいますので、input rangeの見た目や動きでチェックボックス式が出来れば・・と思い試行錯誤している状態です・・。
guest

回答2

0

ベストアンサー

alpine.jsで簡単に

https://codepen.io/synchrovision/pen/xxJeYaW

alpine.jsならこの程度はJSのコードを書くことなくできます。
alpine.jsいいですよ。

投稿2023/02/07 08:14

編集2023/02/07 08:18
KazuhiroHatano

総合スコア7800

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

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

Hiyoko_mochi

2023/02/08 05:51

>KazuhiroHatano 様 ご回答ありがとうございます。 alpine.jsを知らなかったので、調べていて、ご返信遅くなりました。 頂いた内容を元に2つのつまみを設定しながら下限・上限を設ける方法がないかと https://codepen.io/kuronekonnc/pen/abjrmLb こちらのようにはしてみましたが、rangeが重ならず、 MAXまで行った場合は上限なし、0の場合は下限なしと表示させれるような方法が見つからず・・なのですが、ご教授頂く事は可能でしょうか? お手数おかけし申し訳ございません・・。
KazuhiroHatano

2023/02/08 06:37 編集

range inputに2つコントロールを置くのは無理なので、参考サイトに同じくjsでゴニョゴニョやらざるを得ないですね。 まあjQueryUIにはお望みのものがあるんですが、今から作るものにjQueryUI使うのもなんだかなぁって気がしちゃいます。 WordPressに内蔵されてるし、WordPressが今更脱jQueryするビジョンが見えないんで、せっかくあるんだから使うというのも選択肢とは思いますが。 https://jqueryui.com/slider/#range https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script
Hiyoko_mochi

2023/02/14 08:02

検証や模索でお時間かかってしまい、お返事遅れて申し訳ございません。 色々調べて https://codepen.io/kuronekonnc/pen/NWBZLNj 上記までは何とか辿り着く事が出来ました。 ここから、検索のトリガーに繋ぎ込めればと思いますので、また色々試してみたいと思います。 ご回答頂きありがとうございました。
guest

0

input type="range"を使ってみましたが、そもそも値の部分が数字でしか設定が行えなかった為

JavaScriptで値を取って、price100のような形式に変換してはどうでしょうか。

投稿2023/02/06 11:32

maisumakun

総合スコア145021

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

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

Hiyoko_mochi

2023/02/07 07:55 編集

>maisumakun様 ご回答ありがとうございます。 その内容ですと、例えばValue="100"をprice100にする・・と言う認識で合ってますでしょうか? 検索フォームのタグでは <datalist id="price-datalist"> <option value="">下限なし</option> <option value="100">100万円</option> <option value="200">200万円</option> <option value="300">300万円</option> <option value="400">400万円</option> <option value="500">500万円</option> <option value="600">600万円</option> <option value="700">700万円</option> <option value="800">800万円</option> <option value="900">900万円</option> <option value="1000">1000万円</option> <option value="">上限なし</option> </datalist> こういう風になり、検索結果に表示をさせる前にprice100などに変換する?となると、上限無しの時がうまく検索されない気がしておりまして・・。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問