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内で入力したものと対応させてください」というところでしょうか。

まとめ

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

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

では、また。