jQuery checked属性でチェックされたラジオボタンの値を取得するサンプル

2022年12月14日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1

構文
$('[name="指定name属性名"]:checked’).val()
「:checked」を使用してチェックされたラジオボタンの値を取得します。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#btnchk').on('click', function () {
    // チェックされたラジオボタンの値
    $('#result').text( $('[name="city"]:checked').val() )
  })
});
</script>
</head>
<body>

      <h2 id="result"></h2>

          <div>
            <input type="radio" name="city" value="東京">
            <label>東京</label>
          </div>
          <div >
            <input type="radio" name="city" value="大阪">
            <label>大阪</label>
          </div>
          <div>
            <input type="radio" name="city" value="福岡">
            <label>福岡</label>
          </div>

        <p><button id="btnchk" >検証</button></p>
    </div>
  </div>

</body>
</html>

実行結果
ラジオボタン「大阪」を選択し「検証」ボタンを押すと、要素「result」に「大阪」が表示されます。

jQuery

Posted by arkgame

関連記事: