jQuery - ラジオボタン(radio)の設定と取得

公開日：2018-12-21 更新日：2019-05-14
[jQuery]

1. 概要

ラジオボタン(radio)の設定と取得を行います。
取得する場合は、セレクタでラジオボタンを1つずつ指定して取得する方法や、
フォームフィルターの :checked を使い、チェックされている要素を取得して、そこからチェック状況を取得する方法などがあります。

//チェックの設定
$(セレクタ).prop('checked', true);

//チェック状態の取得
$(セレクタ).prop("checked"); //true or false

//チェックされている要素の value の取得
$(":checked").val();

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <div id="fruits">
    <input type="radio" name="test" id="fruits1" value="A" checked="checked" />
    <label for="fruits1">apple</label>
    
    <input type="radio" name="test" id="fruits2" value="B" />
    <label for="fruits2">orange</label>

    <input type="radio" name="test" id="fruits3" value="C" />
    <label for="fruits3">banana</label><br />
  </div>

  <input type="button" value="取得"             onclick="get()" />　
  <input type="button" value="orange を選択する" onclick="set()" /><br /><br />
  
  <div id="msg1"></div>
  <div id="msg2"></div>
  <script>
    function get() {
      //選択されている項目の value を取得します
      var value = $("#fruits :checked").val();
      
      //画面表示
      $("#msg1").html( value );
      $("#msg2").html( $("#fruits [value=" + value + "] + label").html() );
    }

    function set() {
      //value="B" の項目を選択します
      $("#fruits [value=B]").prop('checked', true);
    }
  </script>
</body></html>

実行結果：画面



Tag

New Article