jQueryとJavaScriptでフォーム要素の取得・設定方法を比較

@ハクト 2022-10-17 14:57:42に投稿

「querySelector」のおかげでフォーム要素の取得・設定も素のJavaScriptで書きやすくなりましたね。

今回はjQueryとJavaScriptで書き方の違いを比較してみました。

 

テキストボックスの値を取得または設定する

$('#id').val();       //取得
$('#id').val('aaa');  //設定
document.querySelector('#id').value;       //取得
document.querySelector('#id').value='aaa'; //設定

セレクトボックスの選択値を取得または設定する

//選択値(value値)を取得
$('#id').val();
//選択したテキストを取得
$('#id option:selected').text();

//value値を設定
$('#id').val(2); 
const elem=document.querySelector('#id');
//選択値(value値)を取得
elem.querySelector('#id').value;
//選択したテキストを取得
const idx=elem.selectedIndex;
elem.options[idx].text;

//value値を設定
elem.value=2; 

ラジオボタンの値を取得・設定する

//チェック値取得
$('[name=radio]:checked').val();

//インデックスを指定し設定
$('[name=radio]').eq(2).prop('checked',true)
//jQueryは以下のように配列指定も可能
$('[name=radio]').val([2]);
//チェック値取得
document.querySelector('[name=radio]:checked').value;

//インデックスを指定し設定
document.querySelectorAll('[name=radio]')[2].checked=true;

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter