【初心者向け】覚えて損はないJSによるform系要素の操作をcodepenで説明

普段はほとんどJQueryで書いています。
とても基本的なことですが、大切なことだと思うのでまとめています。
どれもトリガーはclickになっています。

テキストボックス/テキストエリアの値を取得

valueプロパティでテキストエリアの中身を取得できます。

See the Pen joWNQp by n-kaminaga (@n-kaminaga) on CodePen.

セレクトボックスの値を取得

セレクトボックスもvalueで取得できます。

See the Pen joWNQp by n-kaminaga (@n-kaminaga) on CodePen.

ラジオボタンの値を取得

checkedプロパティで取得ができます。
for文で同じneme属性のラジオボタン全てのチェックの有無を確認します。

See the Pen mYPPaE by n-kaminaga (@n-kaminaga) on CodePen.

チェックボックスの値を取得

checkedプロパティで取得ができます。
チェックボックスは複数選択可能なので、for文で同じneme属性のチェックボックス全てのチェックの有無を確認し、配列にpushしていきます。

See the Pen xNVORb by n-kaminaga (@n-kaminaga) on CodePen.