フォーム

ラジオボタンとチェックボックスを使って複合的にコンテンツの絞り込み検索をします。絞り込み検索の条件はラジオボタンとチェックボックスのvalue属性と、コンテンツのdivタグのカスタムデータ属性の一致です。

jQuery UIのButtonを利用して、buttonタグ、input type="button"、input type="submit"、aタグ、input type="checkbox"、input type="radio"をボタン化します。

選択肢のチェックボックスにチェックを入れると、その選択肢のテキストがページ上部に表示されます。選択肢が多数ある場合、何を選択したかわかりやすくなります。

お問合せ入力フォームのエラーチェックにjQueryプラグインのjquery.validate.min.jsを利用します。必須入力チェック以外にも、入力フォームの項目に合わせて様々なエラーチェックが設定できます。

入力フォームに開始日時と終了日時を分けて入力し、必須入力チェック、開始日時と終了日時の整合性チェックを行います。

jQuery UIを導入し、Datepickerでカレンダーから日付を入力します。それぞれ開始日と終了日を分けて入力し、必須入力チェック、開始日と終了日の整合性チェックを行います。

製品名のチェックボックスを選択すると該当の製品の説明が表示され、チェックを外すと製品の説明が非表示になります。製品名を全て選択できるチェックボックスも実装します。

セレクトボックスからカテゴリーを選ぶと、選択したカテゴリーのトップへ移動します。select内optionのvalue値をjQueryで取得し、window.location.hrefに代入することでリンクの動作を実現します。

セレクトボックスから都道府県を選んで選択ボタンを押すと、選択された地域を表示します。select内optionのvalue値をjQueryで取得し、地域が記述されたpタグの中から表示するpタグを判定しています。