フォームのラジオボタンについて質問です。多分、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と選択 ○できる!

回答の条件
  • 1人50回まで
  • 登録:2009/06/25 23:48:32
  • 終了:2009/06/26 03:27:17

回答(3件)

id:sphire No.1

sphire回答回数115ベストアンサー獲得回数122009/06/26 00:30:12

ポイント100pt

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

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

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

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

id:shiko-tama

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

ズバリ

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

の挙動を希望です。

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

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

2009/06/26 00:51:47
id:y-kawaz No.2

y-kawaz回答回数1421ベストアンサー獲得回数2262009/06/26 01:52:06

ポイント100pt

こんな感じですかね。

<!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タグを追加しました。

id:shiko-tama

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

http://shikotama.com/form3.html

同じようにonchange→onclickに。

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

2009/06/26 03:25:45
id:sphire No.3

sphire回答回数115ベストアンサー獲得回数122009/06/26 01:30:11

ポイント100pt

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

<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;}" />

とか?

id:shiko-tama

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

http://shikotama.com/form2.html

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

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

onclickにしてみました。

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

2009/06/26 03:24:29

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません