jQuery逆引きリファレンス
ラジオボタン／チェックボックス／選択ボックスの選択テキストを取得するには？（val）
valメソッドを使って選択テキストを取得する方法を、ラジオボタン／チェックボックス／選択ボックス／リストボックスなどフォーム要素ごとに説明する。
別稿「TIPS：フォーム要素からの入力値を取得するには？」では、valメソッドを使ってフォーム要素の値を取得する方法について学びました。ただし、（当たり前ですが）ラジオボタンやチェックボックス、選択ボックス／リストボックスにvalメソッドでアクセスした場合、取得できるのはあくまでvalue属性の値です。しかし、画面に表示したいなどの用途によっては、選択された要素のテキストを取得したいということもあるでしょう。そこで本稿では、ラジオボタンやチェックボックス、選択ボックスそれぞれの場合で、選択テキストを取得する方法について紹介します。
ラジオボタンの場合
選択されたラジオボタンのテキストを取得するには、以下のようにします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<p>
血液型：<br />
<input type="radio" id="a" name="blood" value="a" />
<label for="a">A型</label>
<input type="radio" id="b" name="blood" value="b" />
<label for="b">B型</label>
<input type="radio" id="o" name="blood" value="o" checked />
<label for="o">O型</label>
<input type="radio" id="ab" name="blood" value="ab" />
<label for="ab">AB型</label>
</p>
<button type="button" id="btn">クリック</button>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function () {
$('#btn').click(function() {
var id = $('[name="blood"]:checked').attr('id');
console.log($('label[for="' + id + '"]').text()); // 結果：O型
})
});
</script>
</body>
</html>
|
まず、選択されたラジオボタンのid値を取得します。あとは、そのid値と同じ値をfor属性に持つ<label>要素を取得し、textメソッドで配下のテキストを取得します。
ただし、<label>要素で<input type="radio">要素をくくることでも、ラベルをラジオボタンにひも付けることは可能です（その場合はfor属性は不要です）。for属性が明示されていない場合、この方法は利用できませんので注意してください*1。
- *1 この事情は、後述するチェックボックス／選択ボックスでも同様です。
チェックボックス（単一）の場合
オン／オフを表すような単一のチェックボックスでは、以下のようにします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<p>
<label for="married">既婚</label>
<input type="checkbox" id="married" name="married" value="1" checked />
</p>
<button type="button" id="btn">クリック</button>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
$('#btn').click(function() {
if ($('[name="married"]').prop('checked')) {
var checkText = $('label[for="married"]').text();
console.log(checkText); // 結果：既婚
} else {
console.log('チェックされていません。');
}
})
});
</script>
</body>
</html>
|
目的のチェックボックスがチェック状態にあるかは、propメソッドでcheckedプロパティの値を参照することで判別できます。その戻り値がtrueの場合には、先ほどと同じく、id値に対応する<label>要素を検索し、textメソッドで配下のテキストを取得します。
チェックボックス（複数）の場合
選択されたチェックボックスのテキストを取得するには、以下のようにします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<p>
利用しているOS：<br />
<input type="checkbox" id="win" name="os" value="Windows" checked />
<label for="win">Windows</label>
<input type="checkbox" id="lin" name="os" value="Linux" />
<label for="lin">Linux</label>
<input type="checkbox" id="mac" name="os" value="OS X" checked />
<label for="mac">Mac OS X</label>
</p>
<button type="button" id="btn">クリック</button>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function () {
$('#btn').click(function() {
$('[name="os"]:checked').each(function(index, elm) {
var osValue = $(elm).attr('id');
var osText = $('label[for="' + osValue + '"]').text();
console.log(osText); // 結果：Windows、Mac OS X
});
})
});
</script>
</body>
</html>
|
複数のチェックボックスから値を取得するには、選択状態にあるチェックボックスをeachメソッドで取り出し、それぞれのid属性を取得します。
id値を取得できたら、あとは先ほどと同じく、そのid値と同じ値をfor属性に持つ<label>要素を取得し、textメソッドで配下のテキストを取得します。
選択ボックス／リストボックス（単一選択）の場合
選択ボックス、もしくはリストボックス（単一選択）の場合は、以下のようにします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<p>
<label for="sex">性別：</label><br />
<select id="sex" name="sex">
<option value="male">男性</option>
<option value="female" selected>女性</option>
<option value="other">その他</option>
</select>
</p>
<button type="button" id="btn">クリック</button>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
$('#btn').click(function() {
var sexText = $('[name="sex"] option:selected').text();
console.log(sexText); // 結果：女性
})
});
</script>
</body>
</html>
|
これはシンプルです。目的の<select>要素配下から:selectedフィルターで選択状態にある<option>要素を取得し、textメソッドでテキストを取得します。
リストボックス（複数選択）の場合
リストボックス（複数選択）の場合は、以下のようにします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<p>
<label for="pet">ペット：</label><br />
<select id="pet" name="pet" multiple>
<option value="dog">いぬ</option>
<option value="cat" selected>ねこ</option>
<option value="other" selected>その他</option>
</select>
</p>
<button type="button" id="btn">クリック</button>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
$('#btn').click(function() {
$('[name="pet"] option:selected').each(function() {
var petText = $(this).text();
console.log(petText); // 結果：ねこ、その他
});
})
});
</script>
</body>
</html>
|
複数選択の場合も、:selectedフィルターで選択状態にある<option>要素を取得するまでは同じです。ただし、そのままではテキストにアクセスできませんので、eachメソッドで個々の<option>要素を取り出し、textメソッドで順にテキストを取得していきます。
API：.val() カテゴリ：Attributes（属性）｜Forms（フォーム）｜Manipulation（操作） > General Attributes（一般属性）
API：.text() カテゴリ：Manipulation（要素の操作）
API：.prop() カテゴリ：Attributes（属性）｜Manipulation（要素の操作） > General Attributes（一般属性）
API：:selectedフィルター カテゴリ：Selectors（セレクター） > Form（フォーム）｜Selectors（セレクター） > jQuery Extensions（jQuery拡張）
※以下では、本稿の前後を合わせて5回分（第47回～第51回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
48. フォーム要素からの入力値を取得するには？（val）
valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン／チェックボックス／リストボックス（複数選択）の場合の注意点も示す。
49. 【現在、表示中】≫ ラジオボタン／チェックボックス／選択ボックスの選択テキストを取得するには？（val）
valメソッドを使って選択テキストを取得する方法を、ラジオボタン／チェックボックス／選択ボックス／リストボックスなどフォーム要素ごとに説明する。
50. フォーム要素に対して値を設定するには？（val）
valメソッドを使ってフォーム要素の値を設定する方法を説明。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択／解除する方法も示す。
51. jQuery1.x／2.xで作成したアプリをjQuery 3に対応させるには？
2016年6月、jQuery 3.0が正式リリースされた。今後は、従来バージョンのjQueryを使った既存のサイト／ページを、最新のバージョン3に徐々に移行していこう。移行ライブラリ「jQuery Migration」を使った方法を解説する。
