【jQuery】ラジオボタンで選択されている値を取得する

2020年7月6日

HTMLの「input type="radio"」で記述しているラジオボタンの
選択されている値を取得したい事があると思います。jQueryでどう取得するかの話題です。

ラジオボタンです
HTMLでラジオボタンを表示した画面
HTML自体は下記参照

サンプル画面は、
「選択表示」ボタンで、選択されているラジオボタンの値がメッセージボックスで表示されます。
「右選択」ボタンで、右側のラジオボタンが選択状態になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function btn_test(){
        alert($('input[name="rtest"]:checked').val());
    }

    function btn_check(){
        $('input[value="右"]').prop('checked', true);
    }
</script>
</head>
<body>
    <br>
    <input type="radio" name="rtest" value="左" checked>
    <input type="radio" name="rtest" value="右">
    <br>
    <br>
    <input type="button" value="選択表示" onclick="btn_test()" />
    <br>
    <br>
    <input type="button" value="右選択" onclick="btn_check()" />
</body>
</html>

jQueryの読み込み

6行目:jQueryを読み込む宣言です
<script type="text/javascript" src="./jquery-3.4.1.min.js">

選択されているラジオボタンの値を取得・表示

9行目:nameが「rtest」のラジオボタンで、checked(選択)されているval(値)を取得します
alert($('input[name="rtest"]:checked’).val());

ラジオボタンの選択をJavaScriptから操作します

13行目:値が「右」のラジオボタンを選択状態にします。
第2引数の「true」を「false」に変更すると、選択がはずれます。
$('input[value="右"]’).prop('checked’, true);

サイトマップ

2020年7月6日JavaScript,jQuery,プログラム

Posted by こっぷ