勉強したことのメモ

webプログラマが勉強したことのメモ。

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

   

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作することは多々あるもののテキストボックス及びテキストエリア以外は毎回Google検索していた。さすがに毎回検索するのは面倒臭い上に時間がかかるのでこのページにまとめておく。

 

テキストボックス <input type="text">

以下テキストボックスを設置する想定。

<input type="text" name="text_box" id="text_box" data-key="test_key">

値の取得

//valueの取得
const text_box = $('#text_box').val();
//カスタムデータ属性の取得
const key = $('#text_box').data('key');

値を削除(空にする)

$('#text_box').val('');

値を入れる

$('#text_box').val('hoge');

バリデート(空チェック)

const text_box = $('#text_box').val();
if( !text_box ){
    alert('入力されていません。');
    return false;
}

 

テキストエリア <textarea>

以下テキストエリアを設置する想定。

<textarea name="textarea" id="textarea" data-key="test_key"></textarea>

値の取得

//valueの取得
const textarea = $('#textarea').val();
//カスタムデータ属性の取得
const key = $('#textarea').data('key');

値を削除(空にする)

$('#textarea').val('');

値を入れる

//1行の場合
$('#textarea').val("hoge");
//複数行の場合は\nで改行
$('#textarea').val("hoge\nhoge");

バリデート(空チェック)

const textarea = $('#textarea').val();
if( !textarea ){
    alert('入力されていません。');
    return false;
}

 

セレクトメニュー <select>

以下セレクトメニューを設置する想定。

<select name="select" id="select">
    <option value="">選択してください。</option>
    <option value="0" data-price="100" data-key="apple">りんご</option>
    <option value="1" data-price="200" data-key="strawberry">いちご</option>
    <option value="2" data-price="300" data-key="grape">ぶどう</option>
</select>

選択した項目の値を取得

//valueの取得
const select = $('#select').val();
//カスタムデータ属性の取得
const price = $('#select option:selected').data('price');
const key = $('#select option:selected').data('key');

任意の項目を選択

$('#select').val(1);

バリデート(未選択チェック)

const select = $('#select').val();
if( !select ){
    alert('選択されていません。');
    return false;
}

 

ラジオボタン <input type="radio">

以下ラジオボタンを設置する想定。

<label><input type="radio" name="radio" value="0" data-price="100" data-key="apple">りんご</label>
<label><input type="radio" name="radio" value="1" data-price="200" data-key="strawberry">いちご</label>
<label><input type="radio" name="radio" value="2" data-price="300" data-key="grape">ぶどう</label>

選択した項目の値を取得

//valueの取得
const radio = $('input[name="radio"]:checked').val();
//カスタムデータ属性の取得
const price = $('input[name="radio"]:checked').data('price');
const key = $('input[name="radio"]:checked').data('key');

任意の項目を選択

$('input[name="radio"]').val(['1']);

チェックを外す

$('input[name="radio"]').prop('checked', false);

バリデート(未選択チェック)

const radio = $('input[name="radio"]:checked').val();
if( !radio ){
    alert('選択されていません。');
    return false;
}

 

チェックボックス <input type="checkbox">

以下チェックボックスを設置する想定。

<label><input type="checkbox" name="checkbox[]" value="0" data-price="100" data-key="apple">りんご</label>
<label><input type="checkbox" name="checkbox[]" value="1" data-price="200" data-key="strawberry">いちご</label>
<label><input type="checkbox" name="checkbox[]" value="2" data-price="300" data-key="grape">ぶどう</label>

選択した項目の値を取得

//ループ処理
$('[name="checkbox[]"]:checked').each(function(index, element){
    //値の取得
    const checkbox = $(element).val();
    //カスタムデータ属性の取得
    const price = $(element).data('price');
    const key = $(element).data('key');
});

任意の項目を選択

//1つだけ選択する場合
$('input:checkbox[name="checkbox[]"]').val(['0']);
//複数選択する場合
$('input:checkbox[name="checkbox[]"]').val(['0', '1']);
//全て選択する場合
$('input[name="checkbox[]"]').prop('checked', true);

チェックを外す

//特定のチェックボックスのみ解除する場合
$('[name="checkbox[]"]:checked').each(function(index, element){
    //valueが1(いちご)の場合はチェックを解除
    if( $(element).val() == 1 ){
        $(this).prop('checked', false);
    }
});
//全て解除する場合
$('input[name="checkbox[]"]').prop('checked', false);

バリデート(未選択チェック)

if( !$('[name="checkbox[]"]:checked').length ){
    alert('選択されていません。');
    return false;
}

 

その他

値取得時は型に注意する

テキストボックスに数値を入力してもらい合計金額計算ボタンのようなものを押すと「入力した数値+予め設定してある手数料」の合計値を表示させる見積システムみたいなものを作る場合に注意したいのが、jQueryでvalueやカスタムデータ属性の値を取得すると文字列として判定される点。例えばテキストボックスに「1000」を入力、手数料が「500」だった場合は「1000500」が表示される。その為、以下のように型変換をする必要がある。

//テキストボックスの値を取得
const text_box = $('#text_box').val();

//手数料を設定
const commission = 500;

//テキストボックスの値を数値型に変更して計算
const total = Number(text_box) + commission;

 

所感

一通りまとめたので今後は検索しなくても大丈夫な筈。新たにフォーム&jQuery関連でわからないことが出てきたら本記事に追記していく。後はフォームとかのバリデート時にメールアドレス形式チェック等の正規表現関連も毎回Google検索しているのでその辺りもまとめておきたいところ。

 

参考サイト

https://qiita.com/zawascript/items/a25eaf7a222ac3671275

 - jQuery, JavaScript

  関連記事

jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...

PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法

管理画面等から何らかのデータをMySQLに登録し、そのデータをPHPで作成したA ...

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

JavaScriptでinputタグのtypeを変更

チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...