jQuery ラジオボタンの値、ラベル値を取得するサンプル

2022年10月21日

環境
Windows 10 Home 64bit
Google Chrome　106.0.5249.119
jQuery 3.6.0

書式
1.ラジオボタンの値を取得します
$('[name=ラジオボタンの名前]:checked’).val();

2.ラジオボタンのラベル値を取得します
$('[name=ラジオボタンの名前]:checked’).parent('label’).text();

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function funA() {
    /*ラジオボタンのvalueの取得*/
    var cityidx = $('[name=city]:checked').val();
    alert(cityidx)
}
 
function funB() {
    /*ラジオボタンのlabel値の取得*/
    var cityname = $('[name=city]:checked').parent('label').text();
    alert(cityname);
}
</script>
</head>
<body>

<label><input type="radio" name="city" value="0" checked>東京</label>
<label><input type="radio" name="city" value="1">大阪</label>
<label><input type="radio" name="city" value="2">福岡</label>
<label><input type="radio" name="city" value="3">横浜</label><br>

<p><input type="button" value="表示（Value）" onClick="funA();"></p>
<p>
<input type="button" value="表示（ラベル）" onClick="funB();"></p>


</body>
</html>

結果
ラジオボタンを選択して「表示（Value）」ボタンを押すと、ラジオボタンのvalueが表示されます。
ラジオボタンを選択して「表示（ラベル）」ボタンを押すと、ラジオボタンのラベルが表示されます。

jQuery

Posted by arkgame

関連記事: