「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;
