
JavaScriptで動的に生成されるデータでのラジオボタンの処理の仕
方を教えてください。
具体的には、日毎に変動する社員の中から1人だけ上司を決め、後
の社員は自動的に部下にチェックとなるという組織表を作成したい
のです。
例)
1日目
No. 氏名 上司 部下
1 Aさん ● ○
2 Bさん ○ ●
3 Cさん ○ ●
2日目
No. 氏名 上司 部下
1 Aさん ○ ●
2 Bさん ○ ●
3 Cさん ● ○
4 Dさん ○ ●
といったふうに日毎に社員数が変動となる条件で、かつ誰かを上司
としてチェックすればあとの社員は自動的に部下になるという感じ
にしたいのです。
どうかよろしくお願い致します。
No.1ベストアンサー
- 回答日時:
<!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>1</td><td>Aさん</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>2</td><td>Bさん</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>3</td><td>Cさん</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>
この回答への補足
ご回答、誠にありがとうございます。
例として、100人いる社員の中から、プロジェクトに参加する社員数を
社員の意思に任せ、日毎に参加する任数が変動する(パソコン上でログインした社員が参加した人数)条件で、その中から社長が任意で上司を1人
だけ決めるといったプログラムを作成したいと思っております。
毎日、何人参加するかわからない状況の中で、社長の意思で上司を1人だ
け決めるといった感じです。
参加する人数がきまっていれば比較的容易に作成できるのですが、∞的な
人数の中から1人だけ決める条件は私には難解なもので、お助け頂けると
非常に助かります。
どうかよろしくお願い致します。
No.3
- 回答日時:
#1>∞的な人数の中から1人だけ決める条件
>JavaScriptで動的に生成されるデータでのラジオボタン
が作成されていれば、
#1,#2の回答でラジオボタンの処理をすることができます。
動的に生成されるデータでのラジオボタン
が作成されている環境で試させていただき
ましたところ、うまくいきました。
本当にありがとうございました。
No.2
- 回答日時:
排他処理と動的なメンバー表の作成は分けてかんがえる
とわかりやすいと思います。
排他処理だけなら考え方としては、あるメンバーの
上司欄がクリックされたとき同じフォーム内の別の
メンバーの部下欄をチェックする、というフローに
なりますね。
で、動的に発生させるには、メンバー表をどうわたす
かによると思います。単純に文字列でわたせるなら
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=("Aさん,Bさん,Cさん,Dさん").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>
最初から誰かを上司にしなくてはいけないなら
ランダムなのか任意なのか仕様をきめてください
この回答への補足
こんなに早くのご回答、誠にありがとうございます。
仕様的には、会社の社長が任意にこの日はこのA社員が上司で、次の日は
C社員が上司といった感じで、社長の任意で変動するプログラムを書きた
いと思っています。
早速区、文字列でわたせる条件でsplitをつかって配列に落としてのループ
処理で試したいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptによる自動計算フォーム
-
Javascriptで自動的に計算する...
-
画面表示とともにtableの指定の...
-
ボタン押下すると一行テキスト...
-
Javascriptの電卓で最初の何も...
-
jQueryで合計を出したい
-
JavaScriptの「.querySelectorA...
-
Formのシリアライズができない
-
追加、削除のやり方を教えてく...
-
フォームPOST後「戻る」時のチ...
-
プルダウンで選択すると、DBの...
-
return trueとreturn falseの用...
-
onchangeイベントを強制的に発...
-
C# 配列などの受け渡し
-
【jQuery】input nameの文字列...
-
文末の改行コードを削除したい
-
ボタンを押すとテキストボック...
-
eval()を使わずに数値を取得し...
-
クロームでjavascriptが動作し...
-
数値以外の入力をさせないよう...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
画面表示とともにtableの指定の...
-
JavaScriptの「.querySelectorA...
-
Javascriptの電卓で最初の何も...
-
複数のselect値で1つも選択され...
-
ボタンクリックでフォーカス移動
-
テーブル内のチェックボックス...
-
クリックした行の背景色の変更
-
jQueryで合計を出したい
-
文字数を数える際に空白、改行...
-
インラインフレームを利用した...
-
ラジオボタンを一括で操作する...
-
画面の2重起動をチェックする...
-
メールフォームについて
-
.NETを使用せずに、ASP・VBScri...
-
SCRIPT及びソースを教え...
-
同一nameの input type="text"...
-
テーブルの一部を入力フィール...
-
フォームの入力チェック方法
-
localStorageでのcheckbox制御
おすすめ情報