html Javascript プログラミング

jQueryでどのラジオボタンやselect要素が選ばれているかを判定

ラジオボタンの判定

ラジオボタンやselect要素でどれが選ばれているかを判定する方法。毎回悩むのでメモります。

ラジオボタンはname属性でグループ化されているので、nameで要素とcheckedで絞り込めます。あらかじめ各ラジオボタンのvalueに値を設定してある場合は以下の方法で取得できます。

const radio_selected_val = $("input[name=radio]:checked").val();

select要素の判定、選ばれているインデックスと値を取得

select要素の場合は、selectorのidで要素を選択し、selectedIndex属性で何番目の選択肢が選ばれているか取得できます。

const select_index = $("#selector").prop("selectedIndex");

インデックスではなく、値を取りたいときには以下のようにidとcssセレクタを組み合わせてvalueを取ります。

const select_val = $("#selector option:selected").val();

CodePenサンプル

上記の方法を、両方をまとめてCodePenでメモりました。

See the Pen Untitled by Ryoji Kimura (@ryjkmr) on CodePen.

-html, Javascript, プログラミング