jQuery - ラジオボタン(radio)の設定と取得
公開日：2018-12-21
更新日：2019-05-14
更新日：2019-05-14
1. 概要
ラジオボタン(radio)の設定と取得を行います。
取得する場合は、セレクタでラジオボタンを1つずつ指定して取得する方法や、
フォームフィルターの :checked を使い、チェックされている要素を取得して、そこからチェック状況を取得する方法などがあります。
取得する場合は、セレクタでラジオボタンを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>
実行結果：画面
