こだわり選択 チェックボックス

カーセンサー - CarSensor.UI.Kodawari.Checkbox - by Recruit Web Service UI Library

概要

カーセンサー 中古車検索API に検索クエリ「こだわり」パラメータを渡す事で、検索結果の絞り込みができます。これは、そのこだわり条件を選択する為のチェックボックスUIを簡単に生成するためのモジュールです。

>BACK TO TOP

サンプル

>BACK TO TOP

動作条件

>BACK TO TOP

簡易なコード例

コピペする事で手軽に再利用が可能なコード例はこちら

>BACK TO TOP

使い方

下記のように必要なファイルを読み込んだうえで...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="recruit.ui.js"></script>
<script type="text/javascript" src="carsensor.ui.js"></script>

チェックボックスを表示させたい場所にこのようなHTMLを書き...

<div id="car-kodawari-checkbox"></div>

最後にこのようなjavascriptコードを書くことでチェックボックス群が自動生成されます。

new CarSensor.UI.Kodawari.Checkbox();

jQueryを使って、ページ表示と同時にチェックボックス生成したい場合はこちら:

$( function(){
    new CarSensor.UI.Kodawari.Checkbox();
});

>BACK TO TOP

オプション機能

あらかじめ選択されている状態にする

各チェックボックスにあらかじめチェックが入っている状態にしたい場合は以下のように、チェックを入れておきたい要素の value値(数値)を配列で指定します:

// 福祉車両を選択しておく
new HotPepper.UI.Kodawari.Checkbox({
    val: [ 'welfare' ]
});

実際の動作例:

>BACK TO TOP

その他の機能

その他利用可能なオプション機能についてはこちらの記述を参照してください。

>BACK TO TOP

本コンテンツはリクルートが提供する実験サービスです

メディアテクノロジーラボ