締切済み

ボタンで選択されていないセレクトメニューの非反映２

2011/10/26 23:41

前回、「ボタンで選択されていないセレクトメニューの非反映」という質問をさせて頂いたものです。 http://okwave.jp/qa/q7093835.html 文章構成などは下記のHTMLをしようしているのですが…。「蓋付きのボックス」の＜ラジオボックスをチェックしなければ選択できない＞はクリアできたのですが、「蓋付きバスケット」の方で迷っています。後はこれで合計金額がきちんと出ればいいのですが…、もうすこしお力とお時間を頂けないでしょうか？ <html> <head> <title>簡単見積もり表</title> <script Language="JavaScript"> </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>

woo5963
お礼率0% (0/7)

JavaScript
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2011/10/28 12:50 回答No.3

#1です。反応がないので、よくわからないままですが、勝手に同様のことをやりたいのだと解釈して回答しています。全体像の意図がいまいちわからないところもありますが、そこも勝手に、解釈しています。例えば、『素材を木に変更』の項目も同様と解釈しています。前回のようにselect要素を初期値でdisabledにしておくと、スクリプトオフのユーザは入力できなくなってしまうので、オフの場合は連動の制御や合計の計算はできないけれど入力は可能になるように変えました。金額の計算については、サーバ側で再度ロジックチェックをして算出するのがよろしいかと思います。体裁その他はいい加減なので、ご調製を。（全角空白は半角に）（No2様が良い回答をくださっていることと思いますが（内容確認中なので内容不明）、とりあえずご参考までに） <!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"> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <form name="myFORM" action="#"> 　<fieldset> 　　<legend>セットの果物を一つお選び下さい</legend> 　　<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円）　</fieldset> 　<fieldset> 　　<legend>リボンの色をお選びください</legend> 　　<input type="radio" name="ch2" value="0" checked>赤（0円）　　<input type="radio" name="ch2" value="0">青（0円）　　<input type="radio" name="ch2" value="10">金（10円）　</fieldset> 　<fieldset> 　　<legend>バスケットの形をお選び下さい</legend> 　　<input type="radio" name="cover" value="1200" checked>プラスチック丸型編み込み(1200円）　　<input class="linked" 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">蓋付きのボックス（色によって値段が変化します) 　　<select class="linked" name="color_of_cover"> 　　　<option value="1000">赤 1000円</option> 　　　<option value="1000">青 1000円</option> 　　　<option value="1100">金 1100円</option> 　　</select><br> 　　<input type="radio" name="cover" value="0">蓋付きバスケット（形によって値段が変化します）　　<select class="linked" name="sel1"> 　　　<option value="1500"> 丸 1500円</option> 　　　<option value="1600">四角 1600円</option> 　　　<option value="1600">楕円 1600円</option> 　　</select> 　</fieldset> 　<fieldset> 　　<legend>ご希望のオプションがあれば選択して下さい。（複数選択可）</legend> 　　<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円）　</fieldset> 　<div> 　　<input type="button" name="total" value="合計を出す"> 　　合計<input type="text" name="result" readonly>円　</div> </form> </body> </html>

babu_baboo
ベストアンサー率51% (268/525)

2011/10/28 09:22 回答No.2

いぬまに ^^; Array:　filter, map, reduce をつかってます <!DOCTYPE html> <html lang="ja"> <head> 　<title>簡単見積もり表</title> 　<style type="text/css"> fieldset { 　margin-bottom :1em; } fieldset > p { 　margin : 0; } 　</style> </head> <body> <form> 　<fieldset> 　　<legend>セットの果物を一つお選び下さい</legend> 　　<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円）　</fieldset> 　<fieldset> 　　<legend>リボンの色をお選びください</legend> 　　<input type="radio" name="ch2" value="0" checked>赤（0円）　　<input type="radio" name="ch2" value="2000">青（2000円）　　<input type="radio" name="ch2" value="10">金（10円）　</fieldset> 　<fieldset> 　　<legend>バスケットの形をお選び下さい</legend> 　　<p> 　　　<input type="radio" name="cover" value="1200" checked>プラスチック丸型編み込み\1200 　　　<input type="checkbox" name="bx1" value="500">素材を木に変更（+\500）　　<p> 　　　<input type="radio" name="cover" value="1500">編み込み四角\1500 　　<p> 　　　<input type="radio" name="cover" value="1500">編み込み楕円\1500 　　<p> 　　　<input type="radio" name="cover" value="1000">蓋なしボックスレインボー1000円　　<p> 　　　<input type="radio" name="cover" value="0"> 　　　<b>蓋付きのボックス</b>色によって値段が変化します<br> 　　　<select name="sel1" disabled> 　　　　<option value="39900" selected>赤1000円　　　　<option value="52500">青1000円　　　　<option value="54600">金1100円　　　</select> 　　<p> 　　　<input type="radio" name="cover" value="0"> 　　　<b>蓋付きバスケット</b>形によって値段が変化します<br> 　　　<select name="sel2" disabled> 　　　　<option value="1500" selected>丸　1500円　　　　<option value="1600">四角　1600円　　　　<option value="1600">楕円　1600円　　　</select> 　　　　</fieldset> 　<fieldset> 　　<legend>ご希望のオプションがあれば選択して下さい。（複数選択可）</legend> 　　<input type="checkbox" name="bx1" value="300">クッション材\300 　　<input type="checkbox" name="bx1" value="200">飾り\200 　　<input type="checkbox" name="bx1" value="150">メッセージカード\150 　　<input type="checkbox" name="bx1" value="2500">花束\2,500 　</fieldset> 　<p> 　　<input type="button" value="合計を出す"> 　　合計 <input type="text" name="result"> 　</p> </form> <script> function add (result, num) { 　return result + num; } function toNumber (e) { 　return isNaN (e.value) ? 0: Number (e.value); } function isChecked (node) { 　return node.checked; } function isRadio (node) { 　return ('radio' === node.type); } function setDisabled (node) { 　node.disabled = this.disabled; } function withDisabled (node) { 　var p = node.parentNode; 　if ('P' === p.nodeName) 　　getDescendant.call (this, p).forEach (setDisabled, { disabled: !node.checked }); } function getDescendant (parent) { 　switch (parent.nodeName) { 　case 'INPUT' : case 'SELECT' : case 'TEXTAREA' : 　　return (this.name === parent.name) ? []: [parent]; 　default : 　　return (parent.hasChildNodes ()) 　　　　　 ? Array.prototype.concat.apply ([], 　　　　　　　 Array.prototype.map.call (parent.childNodes, arguments.callee, this)) 　　　　　 : []; 　} } function calc (event) { 　var total = 0; 　var target = event.target || event.srcElement; 　var es = target.form.elements; 　var ary = Array.prototype.concat.call ([], 　　　　Array.prototype.filter.call (es['ch1'], isChecked), 　　　　Array.prototype.filter.call (es['ch2'], isChecked), 　　　　Array.prototype.filter.call (es['bx1'], isChecked), 　　　　Array.prototype.filter.call (es['cover'], isChecked)); 　if (! es['sel1'].disabled) 　　ary.push (es['sel1']); 　if (! es['sel2'].disabled) 　　ary.push (es['sel2']); 　　es['result'].value = ary.map (toNumber).reduce (add, 0); } function handler (event) { 　var e = event.target || event.srcElement; 　　if (e.value === '合計を出す') 　　return calc (event); 　if (isRadio (e)) 　　Array.prototype.filter.call (e.form.elements[e.name], isRadio).forEach (withDisabled, e); } document./*@cc_on @if(1) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/ 　'click', handler, false); </script>

fujillin
ベストアンサー率61% (1594/2576)

2011/10/27 16:46 回答No.1

前回回答者です。＞「蓋付きバスケット」の方で迷っています。『迷っています。』の意味がわかりかねるのですが、「どんなふうにしようか」迷っているのか、「やろうかやるまいか」迷っているのか、あるいは全く別のことで迷っているのか… よくわかりませんけれど、もしかして「同じことをやりたい」という意味なのでしたら、前回回答にも書いてありますように　<select class="linkage" name="sel1" disabled> でいけるはずです。 disabledにしているので、「色を選択してください」の選択肢は必要ではないように思いますが…？＞後はこれで合計金額がきちんと出ればいいのですが…、あれっ、そっちもですか… 今、時間がとれないのでそれは後ほど。