検索やお問い合わせなどのフォームで使用されるinput要素やselect要素。条件が多岐に渡るほど、フロントエンドでの制御が必要になります。今回は、それらの要素を制御するjQueryをまとめました。
状態を取得する
チェックボックス、ラジオボタンの場合
|
1 2 3 4 5 6 7 8 |
$(“input”).change(function(){ var checked = $(this).prop('checked'); if( checked === true ){ //チェックが入っている場合の処理 } else if( checked === false ) { //チェックが入っていない場合の処理 } }); |
テキストボックスの場合
|
1 2 3 4 5 6 7 8 |
$(“input”).change(function(){ var inputText = $(this).val (); if( inputText != “” ){ //入力されている場合の処理 } else if( inputText === “” ) { //入力されていない場合の処理 } }); |
セレクトボックスの場合
|
1 2 3 4 5 6 7 8 |
$(“select”).change(function(){ var selectVal = $(this).val (); if( selectVal != “最初に選択されているoptionのvalue” ){ //選択されている場合の処理 } else if( selectVal === “最初に選択されているoptionのvalue” ) { //選択されていない場合の処理 } }); |
選択する／入力する
チェックボックス、ラジオボタンの場合
|
1 |
$(“input”).prop("checked", true); |
テキストボックスの場合
|
1 |
$(“input”).val(“あいうえお”); |
セレクトボックスの場合
|
1 |
$(“select”).val(“abc”); |
解除する
チェックボックス、ラジオボタンの場合
|
1 |
$(“input”).prop("checked", false); |
テキストボックスの場合
|
1 |
$(“input”).val(“”); |
セレクトボックスの場合
|
1 |
$(“select”).val(“最初に選択されているoptionのvalue”); |
input要素やselect要素は上記３つの制御が基本です。フォームによっては複雑な制御が必要ですが、「取得する」「入力する」「解除する」のいずれかに集約されます。制御がうまくいかないときは、一度立ち止まってシンプルな処理に注目してみてください！
