名付けて"行列ラジオボタン"
行列ラジオボタン
検索してもあんまり出てこなかったのでメモ程度に書き留めときます.
(需要なんて知りません!)
通常のラジオボタンだと
a: b: c:
のように横の重複は防いでくれるんですが,
Q.a,b,cを順位づけを行ってください
a:1位 2位 3位
b:1位 2位 3位
c:1位 2位 3位
のような縦・横の重複までは防いでくれません.
そこでこのような命令をjavascriptで組むことでそれを防げます
<head> <script language="javascript"> // チェックボックスに使用している名前 chn1 = new Array(["ch1-1","ch1-2","ch1-3"],["ch2-1","ch2-2","ch2-3"],["ch3-1","ch3-2","ch3-3"]); chn = new Array(["ch0_1","ch0_2","ch0_3"], ["ch1_1","ch1_2","ch1_3"], ["ch2_1","ch2_2","ch2_3"] ); function chBxOff(self){ var chX; var chY; // 押されたボタンの列番号,行番号を求める for(x=0;x<chn[0].length;x++){ for(y=0;y<chn.length;y++){ if(chn[y][x]==self.name){ chX=x; chY=y; } } } //行のチェックを全てクリア for(x=0;x<chn[0].length;x++){ document.nForm.elements[chn[chY][x]].checked = false; } //列のチェックを全てクリア for(y=0;y<chn.length;y++){ document.nForm.elements[chn[y][chX]].checked = false; } } function check(self){ chBxOff(self); self.checked = true; } </script> </head> <body> <p>ABCについて,1~3位で順位づけを行ってください</p> <form name="nForm"> A: <input type="checkbox" name="ch0_1" onClick="check(ch0_1);">1位 <input type="checkbox" name="ch0_2" onClick="check(ch0_2);">2位 <input type="checkbox" name="ch0_3" onClick="check(ch0_3);">3位<br> B: <input type="checkbox" name="ch1_1" onClick="check(ch1_1);">1位 <input type="checkbox" name="ch1_2" onClick="check(ch1_2);">2位 <input type="checkbox" name="ch1_3" onClick="check(ch1_3);">3位<br> C: <input type="checkbox" name="ch2_1" onClick="check(ch2_1);">1位 <input type="checkbox" name="ch2_2" onClick="check(ch2_2);">2位 <input type="checkbox" name="ch2_3" onClick="check(ch2_3);">3位 </form> </body>
実際の例がこんな感じになる
実行例
おしまい