現在JavaScriptを使った、HP上での簡単な見積もりページを製作しています。
チェックボックスやラジオボタン、セレクトメニューで選ばれた項目を足して、最終的にテキストボックスに合計金額を出したいと思っています。
内容は全く違いますが、画像のような感じで項目などを作りたいと思っております。
その時に、ラジオボタンでチェックされていないセレクトメニューは選択(計算に反映)されないようにしたいのです。
(「プラスチック丸型編み込み」等が選択されている時は、「蓋付きのボックス」や「蓋付きバスケット」のセレクトメニューは選択されないようにしたいのです。)
自分の作ったものでは、「色を選択」の時点では0に設定してあるのですが、「蓋付きのボックス」のセレクトメニューが他のものを選択していた場合、それが反映されてしまうのです。
計算させるだけならできるのですが、選択されないようにする方法がわからなくて困っております。
拙い文章で申し訳ないのですが、どなたか教えてくださらないでしょうか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
どのような文書構成なのかわからないので、勝手な想定かつ少々非効率的ですが、アイデアとして…
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function linker(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName != "INPUT" || t.type != "radio") return;
var sel, i, s;
sel = t.form.getElementsByTagName("select");
for(i=0; s=sel[i++];)
if(/(^| )linkage( |$)/.test(s.className)){
t = s.previousSibling;
while(t && (t.nodeName != "INPUT" || t.type != "radio")) t = t.previousSibling;
if(t) s.disabled = !t.checked;
}
}
//-->
</script>
</head>
<body>
<form action="#" onclick="linker(event)">
<fieldset>
<legend>ボックスの蓋</legend>
<input type="radio" name="cover" value="covered">蓋あり
<select class="linkage" name="color_of_cover" disabled>
<option value="1000">white</option>
<option value="1200">yellow</option>
<option value="1400">red</option>
<option value="1600">black</option>
</select>
<br>
<input type="radio" name="cover" value="open">蓋なし
</fieldset>
</form>
</body>
</html>
*「linkage」設定のあるselect要素が対象。
それ以前の兄弟要素のラジオボタンに連動します。
この回答への補足
あやふやな質問にも関わらず、回答ありがとうございます。
文章構成などは下記のHTMLをしようしているのですが…。
「蓋付きのボックス」の<ラジオボックスをチェックしなければ選択できない>はクリアできたのですが、「蓋付きバスケット」の方で迷っています。
後はこれで合計金額がきちんと出ればいいのですが…、
もうすこしお力とお時間を頂けないでしょうか?
<html>
<head>
<title>簡単見積もり表</title>
<script Language="JavaScript">
<!--
function calc()
{
n = 0;
fObj = document.myFORM;
n += eval(fObj.sel0.options[fObj.sel0.selectedIndex].value);
n += eval(fObj.sel1.options[fObj.sel1.selectedIndex].value);
for (i=0; i<3; i++) if (fObj[i].checked) n += eval(fObj[i].value);
for (i=3; i<19; i++) if (fObj[i].checked) n += eval(fObj[i].value);
fObj.result.value = n;
}
function linker(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName != "INPUT" || t.type != "radio") return;
var sel, i, s;
sel = t.form.getElementsByTagName("select");
for(i=0; s=sel[i++];)
if(/(^| )linkage( |$)/.test(s.className)){
t = s.previousSibling;
while(t && (t.nodeName != "INPUT" || t.type != "radio")) t = t.previousSibling;
if(t) s.disabled = !t.checked;
}
}
// --></script>
</head>
<body>
<form name="myFORM" action="#" onclick="linker(event)">
<BR>
<b>セットの果物を一つお選び下さい</b><br>
<input type="radio" name="ch1" value="100">りんご(100円)
<input type="radio" name="ch1" value="20">バナナ(20円)
<input type="radio" name="ch1" value="200">梨(200円)
<input type="radio" name="ch1" value="250">ブドウ(250円)
<input type="radio" name="ch1" value="150" checked>みかん(150円)<br>
<BR>
<b>リボンの色をお選びください</b><br>
<input type="radio" name="ch2" value="0" checked>赤(0円)
<input type="radio" name="ch2" value="2000">青(0円)
<input type="radio" name="ch2" value="0">金(10円)<br>
<hr>
<b>バスケットの形をお選び下さい</b><br>
<INPUT type="radio" name="cover" value="1200" checked>プラスチック丸型編み込み\1200<INPUT type="checkbox"
name="bx1" value="500">素材を木に変更(+\500)<BR>
<INPUT type="radio" name="cover" value="1500">編み込み四角\1500<BR>
<INPUT type="radio" name="cover" value="1500">編み込み楕円\1500<BR>
<INPUT type="radio" name="cover" value="1000">蓋なしボックスレインボー1000円<br>
<INPUT type="radio" name="cover" value="covered"><b>蓋付きのボックス</b>
色によって値段が変化します<br>
<select class="linkage" name="color_of_cover" disabled>
<OPTION value="0" selected>色を選択</OPTION>
<OPTION value="39900">赤1000円</OPTION>
<OPTION value="52500">青1000円</OPTION>
<OPTION value="54600">金1100円</OPTION>
</select><BR>
<INPUT type="radio" name="cover" value="0"><b>蓋付きバスケット</b>
形によって値段が変化します<BR>
<select name="sel1">
<OPTION value="0" selected>形を選択</OPTION>
<OPTION value="1500">丸 1500円</OPTION>
<OPTION value="1600">四角 1600円</OPTION>
<OPTION value="1600">楕円 1600円</OPTION>
</select>
<br><hr><BR>
<b>ご希望のオプションがあれば選択して下さい。(複数選択可)</b><BR>
<INPUT type="checkbox" name="bx1" value="300">クッション材\300
<INPUT type="checkbox" name="bx1" value="200">飾り\200<BR>
<INPUT type="checkbox" name="bx1" value="150">メッセージカード\150
<INPUT type="checkbox" name="bx1" value="2500">花束\2,500<BR>
<BR>
<hr>
<input type="button" value="合計を出す" onClick="calc()"><br>
合計<input type="text" name="result"><br>
</form>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
jQuery セレクトボックスで選択...
-
CSVファイルを読みこみ、プルダ...
-
Selectの中身をfor文で入れる
-
javascriptでの2つのプルダウン...
-
セレクトを全て選択されていな...
-
jspに組込んだJavaScript でjava文
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
ボタンで選択されていないセレ...
-
【javascript・PHP】プルダウン...
-
<textarea>にプルダウンを表示...
-
INPUTで入力された値やSELECTで...
-
HTMLコンボボックスへの項目追加
-
リストボックスの項目の順番を...
-
セレクトメニューで選択された...
-
セレクトの値を取得できない
-
プルダウンとテキストの連動
-
プルダウンで現在の年月日を取...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
JQuery selectが反映されない
-
selectメニューのselectedの位...
-
onFocusOutが複数回呼ばれる!
-
フォームのメニューリストを外...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
Selectの中身をfor文で入れる
-
javascriptでselectボックスの<...
-
html selectの内容を初期値に戻す
-
ブラウザの戻るボタンを押した...
-
プルダウンで現在の年月日を取...
-
リストボックスの項目の順番を...
-
プルダウンとテキストの連動
-
<textarea>にプルダウンを表示...
-
DBの値を利用して、3つの連動し...
-
UWSCのIE操作でプルダウンを選...
おすすめ情報