jqueryの画面操作イベントにchangeとselectのイベントがある。
changeイベントは「フォームのフィールドの値が変化したときに発火するイベント」でselectイベントは「テキストが選択されたときに発火するイベント」と説明されている。
これを具体的に説明すると、選択されているラジオボタンが変化した場合はchangeイベントが、テキストエリアのテキストが選択されたときはselectイベントが発火する。
試したソースコード
<form>
<fieldset id="dest">
<legend>都市</legend>
<input id="tech-h" name="tech" type="radio" value="東京">
<label for="tech-h">東京</label>
<input id="tech-c" name="tech" type="radio" value="ロスアンゼルス">
<label for="tech-c">ロスアンゼルス</label>
<input id="tech-j" name="tech" type="radio" value="ニューヨーク">
<label for="tech-j">ニューヨーク</label>
<input id="tech-f" name="tech" type="radio" value="ロンドン">
<label for="tech-f">ロンドン</label>
</fieldset>
<fieldset>
<legend>人口について</legend>
<textarea id="textarea" name="tech" cols="50" rows="8"></textarea>
</fieldset>
<input type="submit" value="クリア">
</form>
<table id="result">
<tr>
<td>ラジオボタンの選択</td>
<td id="tech-r"></td>
</tr>
<tr>
<td>テキストの選択</td>
<td id="tech-t" style="width:10em;"></td>
</tr>
</table>
<script type="text/javascript">
var parson = {
東京:'面積は2,187.58km2、人口は13,227,730人（2012年7月現在）である。日本の都道府県の中では人口が最も多い',
ロスアンゼルス:'ロサンゼルス市の人口は3,844,829人（2006年7月1日現在）で全米2位の規模。市内にハリウッドやザ・バレーなどがある',
ニューヨーク:'ニューヨーク市はアメリカ合衆国北東部の大西洋に面し、巨大なニューヨーク港を持つ。市はブロンクス、ブルックリン、マンハッタン、クイーンズ、スタテンアイランドという5つの行政区（バロウ、ボロウ）に分けられる。2010年の国勢調査における市域人口は8,175,133人を数え[3]、陸地面積は790km2',
ロンドン:'2011年3月時点のロンドンの公式の人口は8,174,100人であり、欧州連合の市域人口では最大で、イギリス国内の全人口の12.7%を占めている'
};
var techr = $('#tech-r'); /* ラジオボタンの選択 */
var techt = $('#tech-t'); /* テキストの選択 */
$('form').submit(function(){ /* クリアボタン クリック時 */
$('textarea').val(""); /* <textarea>のクリア */
techr.text(""); /* ラジオボタンの選択内容をクリア */
techt.text(""); /* テキストの選択内容をクリア */
$('input[name="tech"]').attr('checked', false); /* ラジオボタンを全てクリア */
return false; /* <form onsubmit="rerurn false;"> と同じ(フォームを送信しない) */
});
// ラジオボタンの選択が変更されたら
$('form :radio').change(function(){
$('textarea').val(parson[this.value]);
techr.text(this.value); /* 選択されたラジオボタンの値を表示 */
techt.text(""); /* テキストの選択内容をクリア */
});
// テキストが選択されたら
$('form textarea').select(function(){
// 選択されたテキストの部分を表示
techt.text(document.selection && document.selection.createRange().text ||
$(this).val().slice(this.selectionStart,this.selectionEnd));
});
</script>
サンプル
