人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

フォームのラジオボタンについて質問です。多分、Javascript必要です。

まずは以下URLのページご参照ください。
http://shikotama.com/form.html

このフォームのラジオボタン、
現在はnameの設定でアルファベット行だけは
1つしか選択できないようになっていますが、
これを数字列についても
1つしか選択できないようにすることは可能でしょうか。
さらに、その実現方法を教えていただければと思います。

Javascriptにて、実現できるとは聞いているのですが...


■意味分からんというときのための例

A-1,B-1,C-1と選択 ×できない!
A-1,A-2,A-3と選択 ×できない!
A-1,B-2,C-3と選択 ○できる!


●質問者: しこたま
●カテゴリ:ウェブ制作
✍キーワード:C-1 JavaScript name URL アルファベット
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● sphire
●100ポイント

JSで制御可能だと思うのですが、以下のどちらの挙動をご希望でしょうか?

(1) A-1 を選択した時点で B-1、C-1 を選択不能(disabled=true)にする

(2) A-1 を選択後、B-1 を選択すると A-1 のチェックが解除(checked=false)される

それぞれ、実装方法が異なります。

◎質問者からの返答

ご回答いただきありがとうございます!

ズバリ

(2) A-1 を選択後、B-1 を選択すると A-1 のチェックが解除(checked=false)される

の挙動を希望です。

わかりづらい質問文で申し訳ありませんでした。

引き続きよろしくお願いいたします。


2 ● y-kawaz
●100ポイント

こんな感じですかね。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /> 
 <meta name="generator" content="HeTeMuLu Creator Ver.1.10a" /> 
 <title></title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080"> 
 <form action="" action="post"> 
 <table border="1" cellpadding="10" cellspacing="0"> 
 <tr>
 <th class="th-hoge"></th>
 <th class="namber">1</th>
 <th class="namber">2</th>
 <th class="namber">3</th>
 </tr>
 <tr class="odd">
 <td class="hoge">A</td>
 <td class="namber kugiri"><label for="label_1_1"><span><input id="label_1_1" type="radio" name="label_1_1" value="" /></span></label></td>
 <td class="namber kugiri"><label for="label_1_2"><span><input id="label_1_2" type="radio" name="label_1_2" value="" /></span></label></td>
 <td class="namber kugiri"><label for="label_1_3"><span><input id="label_1_3" type="radio" name="label_1_3" value="" /></span></label></td>
 </tr>
 <tr>
 <td class="hoge">B</td>
 <td class="namber kugiri"><label for="label_2_1"><span><input id="label_2_1" type="radio" name="label_2_1" value="" /></span></label></td>
 <td class="namber kugiri"><label for="label_2_2"><span><input id="label_2_2" type="radio" name="label_2_2" value="" /></span></label></td>
 <td class="namber kugiri"><label for="label_2_3"><span><input id="label_2_3" type="radio" name="label_2_3" value="" /></span></label></td>
 </tr>
 <tr class="odd">
 <td class="hoge">C</td>
 <td class="namber kugiri"><label for="label_3_1"><span><input id="label_3_1" type="radio" name="label_3_1" value="" /></span></label></td>
 <td class="namber kugiri"><label for="label_3_2"><span><input id="label_3_2" type="radio" name="label_3_2" value="" /></span></label></td>
 <td class="namber kugiri"><label for="label_3_3"><span><input id="label_3_3" type="radio" name="label_3_3" value="" /></span></label></td>
 </tr>
 </table>
 </form>
</body>
<script type="text/javascript">
(function(){
 for(var x=1; x<=3; x++) {
 for(var y=1; y<=3; y++) {
 (function(x, y) {
 var input = document.getElementById('label_'+x+'_'+y);
 input.onchange = function() {
 for(var xx=1; xx<=3; xx++) {
 if(x != xx) {
 document.getElementById('label_'+xx+'_'+y).checked = false;
 }
 }
 for(var yy=1; yy<=3; yy++) {
 if(y != yy) {
 document.getElementById('label_'+x+'_'+yy).checked = false;
 }
 }
 };
 })(x, y);
 }
 }
})();
</script>
</html>

修正点は以下の2点です。

・nameでグルーピングされてると面倒なのでnameはidと同じにさせてもらいました。

・自分の状態が変わったら同じ行/列の他のラジオボタンをオフにするように、全てのラジオボタンのonchangeイベントを作ってるscriptタグを追加しました。

◎質問者からの返答

こちらでもできました。本当にありがとうございます。

http://shikotama.com/form3.html

同じようにonchange→onclickに。

お世話になりました。多謝!


3 ● sphire
●100ポイント

汎用的ではありませんが、とりあえず力業で実現すると。

<input type="radio" name="a" id="a1" value="1" onchange="if(this.checked){getElementById('b1').checked=false;getElementById('c1').checked=false;}" />
<input type="radio" name="a" id="a2" value="2" onchange="if(this.checked){getElementById('b2').checked=false;getElementById('c2').checked=false;}" />
<input type="radio" name="a" id="a3" value="3" onchange="if(this.checked){getElementById('b3').checked=false;getElementById('c3').checked=false;}" />
<input type="radio" name="b" id="b1" value="1" onchange="if(this.checked){getElementById('a1').checked=false;getElementById('c1').checked=false;}" />
<input type="radio" name="b" id="b2" value="2" onchange="if(this.checked){getElementById('a2').checked=false;getElementById('c2').checked=false;}" />
<input type="radio" name="b" id="b3" value="3" onchange="if(this.checked){getElementById('a3').checked=false;getElementById('c3').checked=false;}" />
<input type="radio" name="c" id="c1" value="1" onchange="if(this.checked){getElementById('b1').checked=false;getElementById('a1').checked=false;}" />
<input type="radio" name="c" id="c2" value="2" onchange="if(this.checked){getElementById('b2').checked=false;getElementById('a2').checked=false;}" />
<input type="radio" name="c" id="c3" value="3" onchange="if(this.checked){getElementById('b3').checked=false;getElementById('a3').checked=false;}" />

とか?

◎質問者からの返答

ありがとうございます。できました。

http://shikotama.com/form2.html

onchangeですとIE6,7にて他にフォーカスを移さないと

前のチェックが消えてくれなかったため

onclickにしてみました。

いや本当に助かりました。多謝!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ