ラジオボタンによる内容の振り分け

質問

お世話になります。
他の方が作ったファイルを修正しないといけなくなり、本当に悩んでます…。お願いします。教えてください。

ラジオボタンによるフォームの振り分けをさせたいと思っています。

[HTMLファイル（fruit.html）]
まずラジオボタンが以下のようになっています。

<input name="種類" type="radio" value="アップル" onclick="jobShow('apple');jobHide('banana');jobHide('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobHide('orange');" id="item1" checked="checked" />アップル
<input name="種類" type="radio" value="バナナ" onclick="jobHide('apple');jobShow('banana');jobHide('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobHide('orange');" id="item2" />バナナ
<input name="種類" type="radio" value="ピーチ" onclick="jobHide('apple');jobHide('banana');jobShow('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobHide('orange');" id="item3" />ピーチ
<input name="種類" type="radio" value="ベリー" onclick="jobHide('apple');jobHide('banana');jobHide('peach');jobShow('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobHide('orange');" id="item4" />ベリー
<input name="種類" type="radio" value="グレープ" onclick="jobHide('apple');jobHide('banana');jobHide('peach');jobHide('berry');jobShow('grape');jobHide('lemon');jobHide('melon');jobHide('orange');" id="item5" />グレープ
<input name="種類" type="radio" value="レモン" onclick="jobHide('apple');jobHide('banana');jobHide('peach');jobHide('berry');jobHide('grape');jobShow('lemon');jobHide('melon');jobHide('orange');" id="item6" />レモン
<input name="種類" type="radio" value="メロン" onclick="jobHide('apple');jobHide('banana');jobHide('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobShow('melon');jobHide('orange');" id="item7" />メロン
<input name="種類" type="radio" value="オレンジ" onclick="jobHide('apple');jobHide('banana');jobHide('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobShow('orange');" id="item8" />オレンジ

そしてその下にそれぞれの項目のフォームがすべて並べてあります。
<h4>アップル</h4>
<table width="576" border="0" cellspacing="1" cellpadding="0" class="common-table">
<tr>
<th width="20%">商品名</th>
<td><select name="商品名1" id="apple1">
<option value="">商品をお選びください</option>
<option value="アップル1">アップル1</option>
<option value="アップル2">アップル2</option>
</select></td>
</tr>
<tr>
<th>個数</th>
<td><input name="個数1" type="text" size="5" id="apple2" />個</td>
</tr>
</table>
</div>
<div id="banana">
<h4>バナナ</h4>
<table width="576" border="0" cellspacing="1" cellpadding="0" class="common-table">
<tr>
<th width="20%">商品名</th>
<td><select name="商品名1" id="banana1">
<option value="">商品をお選びください</option>
<option value="バナナ1">バナナ1</option>
</select></td>
</tr>
<tr>
<th>個数</th>
<td><input name="個数1" type="text" size="5" id="banana2" />個</td>
</tr>
</table>
・・・（オレンジまで続く）

[javascriptファイル]
window.onload=check;
function check() {
if(document.estimate.item1.checked) {
jobShow('apple');
jobHide('banana');
jobHide('peach');
jobHide('berry');
jobHide('grape');
jobHide('lemon');
jobHide('melon');
jobHide('orange');
}
if(document.estimate.item2.checked) {
jobHide('apple');
jobShow('banana');
jobHide('peach');
jobHide('berry');
jobHide('grape');
jobHide('lemon');
jobHide('melon');
jobHide('orange');
}
・・・（item8まで続く）
}
こんな感じです。説明不足なのかもしれませんが、文字制限があるので全部かけそうにありません＞＜
もしこの説明で分かる方いらっしゃいましたら、教えてください。
宜しくお願いします。

回答No.2

yambejp · ベストアンサー

整理したほうがいいですね・・・
こんなかんじでどうですか？

<script>
window.onload=check;
function check(){
var f=document.getElementById("estimate");
for(var i=0;i<f.length;i++){
if(f[i].name=="種類"){
jobSHOW(f[i].id,f[i].checked);
if(!f[i].onclick) f[i].onclick=check;
}
}
}
function jobSHOW(id,flg){
var divs={item1:"apple",item2:"banana",item3:"peach",item4:"berry",item5:"grape",item6:"lemon",item7:"meron",item8:"orange"};
if(document.getElementById(divs[id]))
document.getElementById(divs[id]).style.display=flg?"block":"none";
}

</script>
<form id="estimate">
<input name="種類" type="radio" value="アップル" id="item1" checked /><label for="item1">アップル</label>
<input name="種類" type="radio" value="バナナ" id="item2" /><label for="item2">バナナ</label>
<input name="種類" type="radio" value="ピーチ" id="item3" /><label for="item3">ピーチ</label>
<input name="種類" type="radio" value="ベリー" id="item4" /><label for="item4">ベリー</label>
<input name="種類" type="radio" value="グレープ" id="item5" /><label for="item5">グレープ</label>
<input name="種類" type="radio" value="レモン" id="item6" /><label for="item6">レモン</label>
<input name="種類" type="radio" value="メロン" id="item7" /><label for="item7">メロン</label>
<input name="種類" type="radio" value="オレンジ" id="item8" /><label for="item8">オレンジ</label>

<div id="apple">
<h4>アップル</h4>
</div>
<div id="banana">
<h4>バナナ</h4>
</div>
<div id="peach">
<h4>ピーチ</h4>
</div>
<div id="berry">
<h4>ベリー</h4>
</div>
<div id="grape">
<h4>グレープ</h4>
</div>
<div id="lemon">
<h4>レモン</h4>
</div>
<div id="meron">
<h4>メロン</h4>
</div>
<div id="orange">
<h4>オレンジ</h4>
</div>

</form>

お礼

ご回答ありがとうございます。
こんなにスマートなタグで実現できるとは・・・。
ありがとうございまいした。
もっと勉強します。

回答No.1

auty

・　とてもまともに動いていた物とは思われません。

・　ほとんど役に立たないかも知れませんが

以下のコードを参考にしてみてください。
------------------------------------------------------------

<script language="JavaScript" type="text/javascript">
function check() {
if (document.estimate.item1.checked) {
jobShow("apple");
jobHide("banana");
jobHide("peach");
}
if (document.estimate.item2.checked) {
jobHide("apple");
jobShow("banana");
jobHide("peach");
}
if (document.estimate.item3.checked) {
jobHide("apple");
jobHide("banana");
jobShow("peach");
}
}

function jobShow(s) {
if (document.getElementById(s))
document.getElementById(s).style.display='block';

}

function jobHide(s) {
if (document.getElementById(s))
document.getElementById(s).style.display='none';

}
</script>
<body onload="check()">
<form id="estimate" name="estimate">
<input name="種類" type="radio" value="アップル"
onclick="jobShow('apple');jobHide('banana');jobHide('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobHide('orange');"
id="item1" checked="checked" />
アップル
<input name="種類" type="radio" value="バナナ"
onclick="jobHide('apple');jobShow('banana');jobHide('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobHide('orange');"
id="item2" />
バナナ
<input name="種類" type="radio" value="ピーチ"
onclick="jobHide('apple');jobHide('banana');jobShow('peach');jobHide('berry');jobHide('grape');jobHide('lemon');jobHide('melon');jobHide('orange');"
id="item3" />
ピーチ
</form>
そしてその下にそれぞれの項目のフォームがすべて並べてあります。
<div id="apple">
<h4>
アップル
</h4>
<table width="576" border="0" cellspacing="1" cellpadding="0"
class="common-table">
<tr>
<th width="20%">
商品名
</th>
<td>
<select name="商品名1" id="apple1">
<option value="">
商品をお選びください
</option>
<option value="アップル1">
アップル1
</option>
<option value="アップル2">
アップル2
</option>
</select>
</td>
</tr>
<tr>
<th>
個数
</th>
<td>
<input name="個数1" type="text" size="5" id="apple2" />
個
</td>
</tr>
</table>
</div>
<div id="banana">
<h4>
バナナ
</h4>
<table width="576" border="0" cellspacing="1" cellpadding="0"
class="common-table">
<tr>
<th width="20%">
商品名
</th>
<td>
<select name="商品名1" id="banana1">
<option value="">
商品をお選びください
</option>
<option value="バナナ1">
バナナ1
</option>
</select>
</td>
</tr>
<tr>
<th>
個数
</th>
<td>
<input name="個数1" type="text" size="5" id="banana2" />
個
</td>
</tr>
</table>
</div>
<div id="peach">
<h4>
ピーチ
</h4>
<table width="576" border="0" cellspacing="1" cellpadding="0"
class="common-table">
<tr>
<th width="20%">
商品名
</th>
<td>
<select name="商品名1" id="peach1">
<option value="">
商品をお選びください
</option>
<option value="ピーチ1">
ピーチ1
</option>
<option value="ピーチ2">
ピーチ2
</option>
</select>
</td>
</tr>
<tr>
<th>
個数
</th>
<td>
<input name="個数1" type="text" size="5" id="peach2" />
個
</td>
</tr>
</table>
</div>
</body>

お礼

ご回答ありがとうございます。
いろいろとやり方があるのですね。
まだまだ勉強不足なので、参考にさせていただきます。
ありがとうございました。