カテゴリー: ウェブ制作

タグ:jQuery(8)  

Formで入力項目にフォーカスした時に自動的にチェックを入れる

お問い合わせページのForm等で、チェックボックスとそれに対応するテキスト入力欄の両方に入力しなければならない状況があります。

例えば、業種を選択する場合に「その他」のチェックボックス項目と「その他の業種の内容」を記述するテキスト入力欄です。

この場合にユーザーがテキスト入力欄にフォーカスすると、自動的に「その他」にチェックが入ると手間が省けて良いですよね。

まずはデモページを用意したのでご覧ください。

今回はJQueryを使用して、この様なFormを作成していこうと思います。

HTMLファイルを記述する

まずはHTMLを記述していきます。
チェックボックスの該当部分の記述はこうなります。特に変わった記述はありません。

チェックボックス部分の記述
 
<input type="checkbox" value="その他" name="〇〇" id="other"> <label for="other">その他</label>
  

今回の動作に必要なのはinputのidです。今回は『other』となっていますが、idの中身は任意です。
ご理解されている方も多いかと思いますが、idとforの中身は同じにしておいてください!
次に、テキスト入力欄の記述です。

テキスト入力欄の記述
 
<input type="text" id="otherTxt" placeholder="その他の業種をご入力ください。" />
  

こちらも必要なのはidを指定することのみで、特に変わった記述はしていません。
idの中身は任意です。

次項でjsファイルを記述していきます。

JSファイルを記述する

JSファイルの記述も少量です。
早速書いてしまうと、中身はこんな感じになります。

JSファイルの記述
 
$(function(){

  // テキスト入力欄がフォーカスされた時、チェックボックス「その他」にチェックを入れる
  $('input[type="text"]#otherTxt').focus(function(){
    $('input[type="checkbox"]#other').prop("checked",true);
  })

  // テキスト入力欄からフォーカスが外れた時に入力欄が白紙なら、チェックボックス「その他」のチェックを外す
  $('input[type="text"]#otherTxt').blur(function(){
    if($(this).val() == ""){
      $('input[type="checkbox"]#other').prop("checked",false);
    }
  });

});
  

記述はこれだけです!

特に難しい記述はありません。
あえて注意点を挙げるとすれば、「idは前項のHTML内で入力したものと対応させてください」というところでしょうか。

まとめ

普通にフォームを作成する際にほんのチョットだけ記述を加えるだけなのですが、ユーザビリティを高めたフォームを作成することができます。

時間も手間もほとんどかからないので、ぜひ試してみてください!

では、また。

イベントのご案内

ウェブマーケティング系最大級のイベントが2019年11月23日(土)グランフロント大阪で開催!
10月11日(金)までのお申込みの方は早割の特別料金でご参加いただけます!
詳細はバナーをクリック

ウェブ解析士会議 in Osaka

2018.01.12

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: ツイート: 0

おすすめの記事

TOP