問題
jQueryでフォームのラジオボタンで選択された項目の値を取得するには?
解決策
「$("form input[type='radio']:checked").val()」を行うことで、ラジオボタンで選択された項目の値を取得することができる。
ラジオボタンで選択された項目の値を取得する
jQueryでフォームのラジオボタンで選択された項目の値を取得する方法をご紹介します。
DEMOはこちら
フォームの作成
まず、フォームの作成を行います。
HTML
<form action="" method="post" class="radio">
<p class="ta_center">
<label><input type="radio" name="radiobutton" value="項目01" checked> 項目01</label><br>
<label><input type="radio" name="radiobutton" value="項目02"> 項目02</label><br>
<label><input type="radio" name="radiobutton" value="項目03"> 項目03</label>
</p>
<p class="formbottom"><input type="button" value="選択されたラジオボタンの値をアラートで表示する" class="btns"></p>
</form>
選択されたラジオボタンの値をアラートで表示する記述例
選択されたラジオボタンの値をアラートで表示する記述例は以下となります。
$("form.radio input[type='button']").click(function(){
alert( $("form.radio input[type='radio']:checked").val() );
});
ポイント!
-
- 「$(“form input[type=’radio’]:checked”).val()」を行うことで、ラジオボタンで選択された項目の値を取得することができます。
参照
以下のサイトが、より詳しく解説してくれています。
【【jQuery】ラジオボタンの選択されている項目の取得 at softelメモ】
https://www.softel.co.jp/blogs/tech/archives/2894
この記事のカテゴリを含む記事一覧
人気記事(月間)
- 1,994 Views
MD5の変換・逆変換ができるサイト「Hash Toolkit」
- 2020年05月21日
- Javascript、PHP、お役立ちツール・サービス
- 499 Views
slickをスマートフォン時のみ有効にする
- 2020年03月07日
- HTML、CSS、Javascript、jQuery
- 445 Views
javascriptでエラー「Cannot read property ‘appendChild’ of null」の対処法
- 2020年12月04日
- Javascript
- 435 Views
javascriptでcsvファイルを読み込んで表示させる方法
- 2020年07月21日
- Javascript、jQuery
コメント