WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:ラジオボタン2グループで多岐分岐?JavaScript

0:[投稿] 探 [2004/12/15 18:18 ][環境:IE Java わからない]

初めまして。

2つのグループのラジオボタンそれぞれ1つづつをチェックして
その組み合わせによって指定した書類がiframeに表示される、というものを作りたくいろいろ悩んでいます。
witchかifで分岐させようとおもってますがどう命令していいやら。
いろいろやり方があると漠然とわかったのですがいろいろやり方があるのでなお頭が混乱してわかりません(汗。
よろしくお願いします。

Aグループ 海・空・星のどれかを1つチェック
Bグループ 話・小話・絵のどれかを1つチェック
ABの組み合わせで選択した書類をターゲットフレームに表示したい。
分岐は
海&話・空&話・星&話、の組み合わせ選択ならフレームa
海&小話・空&小話・星&小話、の組み合わせ選択ならフレームb
海&絵・空&絵・星&絵、の組み合わせ選択ならiframe、と
Bグループによって表示場所が変わります。
alertで何を選択したかだしたいともおもってます。
submitによって実行。

いろいろ試したところターゲットが一つだけ(それぞれにいくようにできない)とかどうしてもやりたいことを全部してくれるものができません。
よろしくお願いします。


1:[回答] gun [2004/12/15 22:15 ]

探さんが知りたいのは、何についてですか?


2:[回答] 探 [2004/12/16 08:24 ]

おはようございます。
言葉足らずですみません。JavaScriptについてです。
下記のようにラジオボタンをつくっていますが実行するためのJavaScriptがわかりません。
まず<form>内のラジオボタンはこのように作りました。
1.<input type="radio" name="q1" value="1" checked="checked">海
<input type="radio" name="q1" value="2">空
<input type="radio" name="q1" value="3">星<BR>
2.
<input type="radio" name="q2" checked="checked" value="A">話<BR>
<input type="radio" name="q2" value="B">小話
<input type="radio" name="q2" value="C">絵
<input type="submit" value="go" onclick="GetChecked()">
</form>
としてます。
分岐のパターンが少ないのでwitchかif、caseの方法、どれが一番初心者の私にも管理(増えるかもしれないので)しやすいか。
チェックされたパターンによってリンク先を変えるにはどうしたらいいか。
function go(){
var r1=GetChecked(form.q1)+""
var r2=GetChecked(form.q2)+""
  alert(url[r1+r2]);
}
//これで何を選択したかを確認できる(はず)。
あとは???です。
ラジオボタン二つ連動、そしてリンク先も複数、というところでよいお手本もなかなか見つからず行き詰まってます。
よろしくお願いします。


3:[回答] コトノハ [2004/12/16 08:54 ]

name でグルーピングしていても、id を分ければ区別出来ますよ。

<input type="radio" name="r1" id="r1_1"><label for="r1_1">group 1</label>
<input type="radio" name="r1" id="r1_2"><label for="r1_2">group 2</label>
<input type="radio" name="r1" id="r1_3"><label for="r1_3">group 3</label>

こんな感じで作っておけば getElementById() で区別出来ます。


4:[保留] 探 [2004/12/16 21:05 ]

コトノハさんお返事ありがとうございます。

idをつけgetElementById()、ということですが恥ずかしながらetElementById()は初めてしりましてお返事をいただいてからgetElementById()についていろいろネットで検索してみました。情けないことにさらに頭がパニックです。
私のしたいことがどの方法だとソースが一番すっきしそうか今一度考えたいとおもいます。
(部品の検討はつくのですが組み立ての仕組みがいまいち理解できなく苦戦してます(^^;)


5:[回答] gun [2004/12/17 01:59 ]

// r1_1&r2_1
if ((document.getElementById('r1_1').checked == true)
&& (document.getElementById('r2_1').checked == true)) {

という感じに、並べていくことになるのでは?


6:[関連] test [2004/12/17 08:53 ]

文章のスクリプトだけを見ると:スゥィッチケース構文を使えばいいのでは?
やりたいことを考慮すると:
ハッシュ(hoge["aa"]みたいなこと)を使う点では良い考えですね^^
#hoge["未定義"]からデータを読み取ろうとすると転ける(ばぐる)ので要注意。定義されてれば素晴らしい選択肢(ハッシュ使用)だ
要素が複数有るからまずはデータ要素の特定から
function GetChecked(){
    var frmData = document.forms["acb"];
    var radioForm = new Object();
    for(i=0;i<=frmData.length-1;i++){
        if(frmData[i].type=="radio"&&frmData[i].checked){
            radioForm[frmData[i].name] = frmData[i].value;
        }
    }
    alert(radioForm["q1"]);
}
これで選択された部分のみの抽出が出来たはずだ
form内では同じ名前を配列にして取り扱うのではなくて別IDでの単体として扱ってるから分け分らなくなるのか。
#実際にコード書いちゃったのは難しい内容だとおもったからなのでごりょうしょうを


7:[回答] 探 [2004/12/17 09:18 ]

もし(海)かつ(話)なら{命令〜〜"海話の書類"を"指定場所に表示";}     ということですよね?
これが9こ(分岐分)並ぶのですね。こちらもはっきりすっきり分かりやすくていいですね。
コトノハさんとgunさんのアドバイスで作ってみたいと思います。
ちなみに今作りかけのものは
if((r1 == 0) && (r2 == 1)){    同上〜処理の書き方不明〜 

switch(url[r1+r2]) {
case 00:
alert("『海の話』にいきますよ?");
window.parent.iframe.location.href="umibana.html";こんな動作の書方有??
break;
case 01:   〜〜

とどれも完成度低め。めちゃくちゃな構造でもともと無理だったのでしょうか?
もしそうなら速攻捨てますが(^^;。もしできるならせっかくなのでこの三パターンがんばってやってみます。
(Intも可能みたいですがこれつかう方法は..また今度で../逃)

アドバイスありがとうございます。
勉強になります(^^)


8:[回答] 探 [2004/12/17 09:22 ]

入れ違いになってしまいました(汗

testさん、お返事ありがとうございます。
みなさんのお返事を理解するのにめちゃくちゃな時間かかってます(^^;
しばしお時間をいただき、今できているものと一緒に改善してみたいとおもいます。

本当にありがとうございます。


9:[質問] 探 [2004/12/28 12:46 ]

大変時間かかりましたがソースをのせます。
ですがどうやっても動きません。またも行き詰まってます。
勘違い、間違っているところ、おかしいところを教えて下さい。
またその際解決へのヒントなどいただけると幸いです。
勉強中です。
<head>
<script type="text/JavaScript">
<!--
function onClick(this.form){
var r1 = GetChecked(form.q1)+"";
var r2 = GetChecked(form.q2)+"";
}
var (r1+r2) = var a;
var a = new Array("00","01","02","03","10","11","12","13","20","21","22","23","30","31","32","33");

function GetChecked(radio){
if(!radio.length){
for(var i=0;i<radio.length;i++){
 if(radio[i].checked)
}
}


function onClick(){
switch(a)
{  
 case "00":
 parent.f1.location.href = "見本内容1.html";
 alert("『空の文』");
break;
 case "01":
 parent.f1.location.href = "見本内容1.html";
 alert("『空のSS』");
break;
 case "02":
 parent.f1.location.href = "見本内容1.html";
 alert("『空の絵』");
break;
 case "03":
 parent.f1.location.href = "見本内容1.html";
 alert("『空のその他』);
break;
 case "10":
 parent.f1.location.href = "見本内容1.html";
 alert("『海の文』);
break;
 case "11":
 parent.f1.location.href = "見本内容1.html";
 alert("『海のSS』);
break;
 case "12":
 parent.f1.l探偵のsation.href = "見本内容1.html";
 alert("『海の絵』");
break;
 case "13":
 parent.f1.location.href = "見本内容1.html";
 alert("『海のその他』");
break;
 case "20":
 parent.f1.location.href = "見本内容1.html";
 alert("『星の文』");
break;
 case "21":
 parent.f1.location.href = "見本内容1.html";
 alert("『星のs』");
break;
 case "22":
 parent.f1.location.href = "見本内容1.html";
 alert("『星の絵』");
break;
 case "23":
 parent.f1.location.href = "見本内容1.html";
 alert("『星のその他』");
break;
 case "30":
 parent.f1.location.href = "見本内容1.html";
 alert("『探偵のs』");
break;
 case "31":
 parent.f1.location.href = "見本内容1.html";
 alert("『探偵のs』");
break;
 case "32":
 parent.f1.location.href = "見本内容1.html";
 alert("『探偵のs』");
break;

 case "33":
 parent.f1.location.href = "見本内容1.html";
 alert("『探偵のs』");
break;

}
}
//-->
</script>
</head>
<body>


<form>

<p>

1.<br>
<input type="radio" name="q1" style="transparent" value="空" title="空" checked="checked">空<BR>
<input type="radio" name="q1" style="transparent" value="海" title="海">海<BR>
<input type="radio" name="q1" style="transparent" value="星" title="星">星<BR>
<input type="radio" name="q1" style="transparent" value="他" title="他">他<BR>
<p>
2.<br>
<input type="radio" name="q2" checked="checked" style="color:pink;background-color:#ffd700;" target="_iframe">文<BR>
<input type="radio" name="q2" value="SS" target="_iframe">SS<BR>
<input type="radio" name="q2" value="絵" target="_iframe">絵<BR>
<input type="radio" name="q2"  value="他">他<BR>
<p>
<input type="button" onClick="onClick(this.form)" value="go" style="background-color:transparent;font-size:13pt;">
</form>


10:[回答] 探 [2004/12/28 12:48 ]

他のソースが混じってしまいました。
case "30":
からのは無視してください。


11:[回答] bhj [2004/12/28 13:14 ]

http://www.gac.jp/article/index.php?stats=question&id=13871&command=msg

似たケースで別の方法を見かけましたので、参考まで…


12:[回答] サム [2004/12/28 15:43 ]

大きいところからざっと。

alert文の""が閉じていない。セミコロン(;)が全角になっている。
inputにtargetは不要。SSのnameとvalueの間に全角空白が入っている。

case文の前までをtestさんのやり方に置き換えて、
ラジオボタンのvalueを0、1、2、3にする。
case文の()にq1+q2を入れれば動くかと。


13:[保留] 探 [2004/12/29 15:43 ]

bhjさん、参考サイトありがとうございます。
ここに行き着くまであらゆるキーワードで検索しサイト見まくり本も読みまくっても、未だにできないのです(TT)
サムさん、しょうもないミスをご指摘くださりありがとうございます。情けないです。
また「case文の前まで〜」もやってみたのですが動きません。
おそらく飲み込みの悪い私、なにかがおかしいのでしょう。
サムさん、そしてこれまでアドバイスいただいた方々の言葉を熟読しながらもうちょっとソースとにらめっこしてみます。


14:[回答] ゆり [2005/01/04 12:57 ]

くっ付けてみました。こんな感じでしょうか?

function GetChecked(){
   var frmData = document.forms["acb"];
   var radioForm = new Object();
   for(i=0;i<=frmData.length-1;i++){
       if(frmData[i].type=="radio"&&frmData[i].checked){
           radioForm[frmData[i].name] = frmData[i].value;
       }
   }

   a = radioForm["q1"] + radioForm["q2"];

   switch(a)
   {  
   case "00":
       parent.f1.location.href = "見本内容1.html";
       alert("『空の文』");
   break;

   case "01":
       parent.f1.location.href = "見本内容1.html";
       alert("『空のSS』");
   break;

   case "02":
       parent.f1.location.href = "見本内容1.html";
       alert("『空の絵』");
   break;

   case "03":
       parent.f1.location.href = "見本内容1.html";
       alert("『空のその他』");
   break;

   case "10":
       parent.f1.location.href = "見本内容1.html";
       alert("『海の文』");
   break;

   case "11":
       parent.f1.location.href = "見本内容1.html";
       alert("『海のSS』");
   break;

   case "12":
       parent.f1.l探偵のsation.href = "見本内容1.html";
       alert("『海の絵』");
   break;

   case "13":
       parent.f1.location.href = "見本内容1.html";
       alert("『海のその他』");
   break;

   case "20":
       parent.f1.location.href = "見本内容1.html";
       alert("『星の文』");
   break;

   case "21":
       parent.f1.location.href = "見本内容1.html";
       alert("『星のs』");
   break;

   case "22":
       parent.f1.location.href = "見本内容1.html";
       alert("『星の絵』");
   break;

   case "23":
       parent.f1.location.href = "見本内容1.html";
       alert("『星のその他』");
   break;
   }
}
//-->
</script>
</head>
<body>


<form name="acb">

<p>

1.<br>
<input type="radio" name="q1" style="transparent" value="0" title="空" checked="checked">空<BR>
<input type="radio" name="q1" style="transparent" value="1" title="海">海<BR>
<input type="radio" name="q1" style="transparent" value="2" title="星">星<BR>
<input type="radio" name="q1" style="transparent" value="3" title="他">他<BR>
<p>
2.<br>
<input type="radio" name="q2" checked="checked" style="color:pink;background-color:#ffd700;" value="0">文<BR>
<input type="radio" name="q2" value="1">SS<BR>
<input type="radio" name="q2" value="2">絵<BR>
<input type="radio" name="q2"  value="3">他<BR>
<p>
<input type="button" onClick="GetChecked();" value="go" style="background-color:transparent;font-size:13pt;">
</form>


15:[完了] 探 [2005/01/04 16:45 ]

ありがとうございます。
ゆりさん、感激です!できました!
数カ月も悩んでなかばあきらめそうになりましたがこうしてできたのをみるととてもうれしいです。
でもこれから先また自分には難しいスプリクトを使いたくなったりするのでまたこの完成できたのと比較してどこが間違っていたかなどを分析・勉強します。そして他のやり方でもできるように勉強したいとおもいます。

ありがとうございました!(感涙)


16:[完了] test[answer1] [2005/01/06 00:17 ]

//うわ、難解なスクリプト使って下さってありがとうございます
//さて、僕が考えていたスクリプトはこんな感じです
//失礼ですが書き換えさせていただきます(今後の参考にしていただけると嬉しい)

さて、汎用性という観点で組むと以下のようになります
umi1.html 海と文
umi2.html 海とSS
・・・
のようなファイルをアップロードしておきます

<head>
<script>
//アラートで表示するためのハッシュ
//dspName?["q?の名前"] = "表示名";ってなぐあいで
    var dspName1 = new Object();
    dspName1["sora"] = "空";
    dspName1["umi"] = "海";
    dspName1["hoshi"] = "星";
    dspName1["hoka"] = "他";
    
    var dspName2 = new Object();
    dspName2["0"] = "文";
    dspName2["1"] = "SS";
    dspName2["2"] = "絵";
    dspName2["3"] = "他";
function GetChecked(){
//フォーム名(acb)とのリンク
  var frmData = document.forms["acb"];
//ハッシュ構成のための宣言
  var radioForm = new Object();
//フォームの要素(ラジオ、チェックボックスなど)の参照
  for(i=0;i<=frmData.length-1;i++){
//フォーム要素がラジオボタンでチェックされている場合のみオブジェクトに代入する
      if(frmData[i].type=="radio"&&frmData[i].checked){
          radioForm[frmData[i].name] = frmData[i].value;
      }
  }

//もしHTMLの名前で判別できるのなら
//ファイル名の定義
    var locationName = radioForm["q1"] + radioForm["q2"] + ".html";
//読み込むフレーム(最初、q2の要素によって表示する場所を変えるのかと思ってた)
    var windowName = "frm1"// + radioForm["q2"];
//IE以外だと、エラーになるのでopenやらで対処分を記述した方がいいと思う(フレームがベストかなぁ)
    document[windowName].location.href = locationName;
//アラート
    alert("『" + dspName1[radioForm["q1"]] + "の" + dspName2[radioForm["q2"]] + "』です");
}
//-->
</script>
</head>
<body>


<form name="acb">

<p>

1.<br>
<input type="radio" name="q1" style="transparent" value="sora" title="空" checked="checked">空<BR>
<input type="radio" name="q1" style="transparent" value="umi" title="海">海<BR>
<input type="radio" name="q1" style="transparent" value="hoshi" title="星">星<BR>
<input type="radio" name="q1" style="transparent" value="hoka" title="他">他<BR>
<p>
〜〜〜中略〜〜〜
で、コレを追加
<iframe name="frm1"></iframe>

試行錯誤で組んでいけば必ず良い物が出来てくる


17:[完了] 探 [2005/01/07 00:13 ]

testさん、ありがとうございます。
こちらの方も分析し、理解にこぎ着けたいと思います。
本やサイトでの内容は「こうだからこうなるのか」と理解でき(たつもり?)るのですがいざ自分が組み立てようとするとなかなかできなく、且つ時間をかなり費やします。理解力のなさに泣きたくなります(^^;
>読み込むフレーム(最初、q2の要素によって表示する場所を変えるのかと思ってた)
その通りです。で、caseの命令にparent.フレーム名.location.href = "海文.html";というようにして指示してました。主にフレームBにあるiframeなのですがフレームB全体への表示もあり、それを読み込むとiframe解除になって再びiframeに読み込むことができないので今戻る方法を思案中です。
先はまだまだ長そうです。
何はともあれやっと一つ解決できました。
ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World