JavaScriptでformの値を制御する方法について、
・テキストボックスの値を取得・変更したい時
・チェックボックスの情報を取得・変更したい時
をご紹介します。
formの値を制御したい時は参考にしてみてくださいね。
テキストボックスの値を取得・変更したい【value】
valueは、テキストボックスの値を取得したい時や入力欄の値を書き換えたい時に使います。
以下でテキストボックスの値を取得できます。
インプット要素.value
HTML
|
1 |
<input class="js-text" type="text" value="JavaScript"> |
JavaScript
|
1 2 |
var text = document.querySelector('.js-text').value; console.log(text); |
以下でテキストボックスの値を書き換えることができます。
インプット要素.value = ‘書き換えたい値’
JavaScript
|
1 2 |
var text = document.querySelector('.js-text'); text.value = 'PHP'; |
テキストエリアの場合も同様にvalueを使います。
チェックボックスの情報を取得・変更したい【checked】
checkedは、チェックボックスの選択状態を調べたい時や選択状態を変更したい時に使います。
以下でチェックボックスの選択状態を調べられます。値はtrueかfalseで返ってきます。
インプット要素.checked
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<label> <input class="js-checkbox1" type="checkbox" value="html"> HTML </label> <label> <input class="js-checkbox2" type="checkbox" value="JavaScript" checked> JavaScript </label> <label> <input class="js-checkbox3" type="checkbox" value="PHP"> PHP </label> |
JavaScript
|
1 2 3 4 5 6 7 |
var checkbox1 = document.querySelector('.js-checkbox1').checked; var checkbox2 = document.querySelector('.js-checkbox2').checked; var checkbox3 = document.querySelector('.js-checkbox3').checked; console.log(checkbox1); //false console.log(checkbox2); //true console.log(checkbox3); //false |
以下でチェックボックスの選択状態を変更できます。変更したい選択状態にはtrueかfalseを指定し、trueなら選択・falseなら未選択状態になります。
インプット要素.checked = ‘変更したい選択状態’
JavaScript
|
1 2 |
var checkbox1 = document.querySelector('.js-checkbox1'); checkbox1.checked = true; |
まとめ
以上、JavaScriptでformの値を制御する方法について、
・テキストボックスの値を取得・変更したい【value】
・チェックボックスの情報を取得・変更したい【checked】
をご紹介しました。formの値を取得・変更したい時に参考になれば幸いです。
