アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

締切済

  • 質問者：woo5963
  • 質問日時：
  • 回答数：3件

前回、「ボタンで選択されていないセレクトメニューの非反映」という質問をさせて頂いたものです。
http://oshiete.goo.ne.jp/qa/7093835.html

文章構成などは下記の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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： fujillin
  • 回答日時：

前回回答者です。



＞「蓋付きバスケット」の方で迷っています。
『迷っています。』の意味がわかりかねるのですが、「どんなふうにしようか」迷っているのか、「やろうかやるまいか」迷っているのか、あるいは全く別のことで迷っているのか…

よくわかりませんけれど、もしかして「同じことをやりたい」という意味なのでしたら、前回回答にも書いてありますように
　<select class="linkage" name="sel1" disabled>
でいけるはずです。
disabledにしているので、「色を選択してください」の選択肢は必要ではないように思いますが…？

＞後はこれで合計金額がきちんと出ればいいのですが…、
あれっ、そっちもですか…
今、時間がとれないのでそれは後ほど。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： babu_baboo
  • 回答日時：

いぬまに ^^;



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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

#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">
<!--
form { width:45em; }
form fieldset { margin-bottom:1em; padding:0.5em; }
form legend { font-weight:bold; }
form fieldset input, form fieldset select { margin-left:1em; }
//-->
</style>
<script type="text/javascript">
<!--
(function(){
　var linker = function(form){
　　var i, e, t, elm = form.elements;
　　for(i=0; e=elm[i++];)
　　　if(/(^| )linked( |$)/.test(e.className)){
　　　　t = e.previousSibling;
　　　　while(t && (t.nodeName != "INPUT" || t.type != "radio"))
　　　　　t = t.previousSibling;
　　　　if(t) e.disabled = !t.checked;
　　　}
　}

　var calc = function(form){
　　var i, e, tag, val;
　　var total = 0, elm = form.elements;
　　for(i=0; e=elm[i++];){
　　　val = e.value;
　　　tag = e.nodeName;
　　　if(((tag=="INPUT" && e.checked) || tag=="SELECT") && !e.disabled)
　　　　total += isNaN(val)?0:parseInt(val);
　　}
　　form.elements["result"].value = total;
　}

/*@cc_on@*/
　var handler = function(evt){
　　var t = evt./*@if(1)srcElement@else@*/target/*@end@*/;
　　if(t.nodeName == "INPUT"){
　　　var f = t.form;
　　　if(f.name == "myFORM"){
　　　　if(t.type == "radio") linker(f);
　　　　else
　　　　if(t.type == "button" && t.name == "total") calc(f);
　　　}
　　}
　}

window./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
'load', function(){ linker(document.forms["myFORM"]); }, false);
document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
'click', handler, false);
})();
// -->
</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>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報