子ウィンドウでの選択を取得するjavascrip

質問

表題ですがわかりづらく申し訳ございません。

以下のようなコーディングを考えておりますが
どなたかご教示いただければ幸いです。

項目　テキストスペース　一覧表示

↑上記の「一覧表示」をクリックすると子ウィンドウが立ち上がる。

子ウィンドウの中にラジオボックス、
もしくはチェックボックスの入った選択キーワードが複数あり、
ひとつチェックを入れると
↑の「テキストスペース」に選択したキーワードが取得される、というコーディングです。

※例
　　ブランド選択　　テキストスペース　ブランド一覧

⇒ブランド一覧をクリック、子ウィンドウが立ち上がる
⇒子ウィンドウのブランド一覧の中からユニクロを選択しラジオボックスにチェックを入れる
⇒親ウィンドウ以下のように変化

　　ブランド選択　ユニクロ　ブランド一覧

コーディング初心者ですが
javascriptかjqueryで実装が出来そうな感じなのですが
いい情報が見つかりません。。。

どうぞよろしくお願いします。

回答No.1

LancerVII

こんにちは。

以下のような感じで出来ると思います。
要素の選択を簡単にするためJavaScript+jQueryで実装しています。

==== JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var win;
var targetIndex;
$().ready ( function() {
$('form a').each ( function(index) {
$(this).click ( function() {
// 選択された行数をセット
targetIndex = index;
// 選択ウィンドウを開く
win = window.open ( 'list.html', 'list', 'width=300,height=200' );
return false;
});
});
});
function setValue(text) {
// 選択された行数のvalueに引数のtextをセットする
$('form input:eq('+targetIndex+')').val ( text );
}
</script>

==== HTML
<form>
<table>
<tr>
<td>ブランド選択</td>
<td><input type="text"></td>
<td><a href="#">ブランド一覧</a></td>
</tr>
<tr>
<td>ブランド選択</td>
<td><input type="text"></td>
<td><a href="#">ブランド一覧</a></td>
</tr>
<tr>
<td>ブランド選択</td>
<td><input type="text"></td>
<td><a href="#">ブランド一覧</a></td>
</tr>
<tr>
<td>ブランド選択</td>
<td><input type="text"></td>
<td><a href="#">ブランド一覧</a></td>
</tr>
</table>
</form>

■■■■ 選択ウィンドウ
==== JavaScript
<script type="text/javascript">
$().ready ( function() {
$('input[type="radio"]').click ( function() {
// ウィンドウを開いたページのsetValueメソッドに選択されたradioのvalue値を送る
window.opener.setValue ( $(this).val() );
});
});
</script>

==== HTML
<ul>
<li><input type="radio" name="list" value="ユニクロ">ユニクロ</li>
<li><input type="radio" name="list" value="gu">gu</li>
<li><input type="radio" name="list" value="アースアンドエコロジー">アースアンドエコロジー</li>
</ul>

お礼

うわー　ありがとうございました！
来月にかけて実装しますので色々と試してみます。