- ベストアンサー
動的に生成されるラジオボタンの処理で困っています
- JavaScriptで動的に生成されるデータでのラジオボタンの処理の仕方を教えてください。
- 具体的には、日毎に変動する社員の中から１人だけ上司を決め、後の社員は自動的に部下にチェックとなるという組織表を作成したいのです。
- 日毎に社員数が変動となる条件で、かつ誰かを上司としてチェックすればあとの社員は自動的に部下になるという感じにしたいのです。
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>排他的ラジオボタン？</title> <style> <!-- th,td { text-align:center; } --> </style> <script type="text/javascript"><!-- function boss(rb, n){ var f = rb.form; for(var i=1;i<=n;i++){ if(rb!==f["boss" + i][0]){ f["boss" + i][1].checked = true; } } } //--> </script> </head> <body> <form> <script type="text/javascript"><!-- document.writeln('<table>'); document.writeln('<tr>'); document.writeln('<th>No.</th><th>氏名</th><th>上司</th><th>部下</th>'); document.writeln('</tr>'); document.writeln('<tr><td>１</td><td>Ａさん</td>', '<td><input type="radio" name="boss1" value="boss1" onclick="boss(this,3)"></td><td><input type="radio" name="boss1" value="staff1" checked disabled></td></tr>'); document.writeln('<tr><td>２</td><td>Ｂさん</td>', '<td><input type="radio" name="boss2" value="boss2" onclick="boss(this,3)"></td><td><input type="radio" name="boss2" value="staff2" checked disabled></td></tr>'); document.writeln('<tr><td>３</td><td>Ｃさん</td>', '<td><input type="radio" name="boss3" value="boss3" onclick="boss(this,3)"></td><td><input type="radio" name="boss3" value="staff3" checked disabled></td></tr>'); document.writeln('</table>'); //--> </script> </form> </body> </html>
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>∞的な人数の中から１人だけ決める条件 ＞JavaScriptで動的に生成されるデータでのラジオボタン が作成されていれば、 ＃１，＃２の回答でラジオボタンの処理をすることができます。
お礼
動的に生成されるデータでのラジオボタン が作成されている環境で試させていただき ましたところ、うまくいきました。 本当にありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
排他処理と動的なメンバー表の作成は分けてかんがえる とわかりやすいと思います。 排他処理だけなら考え方としては、あるメンバーの 上司欄がクリックされたとき同じフォーム内の別の メンバーの部下欄をチェックする、というフローに なりますね。 で、動的に発生させるには、メンバー表をどうわたす かによると思います。単純に文字列でわたせるなら splitをつかって配列に落として処理するとループ で簡単に表示できます。 以上をまとめるとこんな感じです。 <script language="javascript"> function josiFunc(obj){ var f=obj.form for(var i=0;i<f.length;i++){ if (f[i].type=="radio" && f[i].value==1 && f[i].name!=obj.name) f[i].checked=true } } </script> <form> <script language="javascript"> var memberlist=("Ａさん,Ｂさん,Ｃさん,Ｄさん").split(","); for (var i=0;i< memberlist.length;i++){ document.write((i+1)+" "+memberlist[i]+"<input type='radio' name='r"+i+"' value='0' onClick='josiFunc(this)'>上司 <input type='radio' name='r"+i+"' value='1' checked>部下<br>"); } </script> </form> 最初から誰かを上司にしなくてはいけないなら ランダムなのか任意なのか仕様をきめてください
補足
こんなに早くのご回答、誠にありがとうございます。 仕様的には、会社の社長が任意にこの日はこのＡ社員が上司で、次の日は Ｃ社員が上司といった感じで、社長の任意で変動するプログラムを書きた いと思っています。 早速区、文字列でわたせる条件でsplitをつかって配列に落としてのループ 処理で試したいと思います。
補足
ご回答、誠にありがとうございます。 例として、１００人いる社員の中から、プロジェクトに参加する社員数を 社員の意思に任せ、日毎に参加する任数が変動する（パソコン上でログインした社員が参加した人数）条件で、その中から社長が任意で上司を１人 だけ決めるといったプログラムを作成したいと思っております。 毎日、何人参加するかわからない状況の中で、社長の意思で上司を１人だ け決めるといった感じです。 参加する人数がきまっていれば比較的容易に作成できるのですが、∞的な 人数の中から１人だけ決める条件は私には難解なもので、お助け頂けると 非常に助かります。 どうかよろしくお願い致します。