• 締切済み

jsonとcheckboxでの料金計算について

jqueryを利用して、簡単な料金シュミレーションを作っています。 主な料金については、計算が出来たのですが、 オプションの料金について、オプション項目と料金をjsonファイルにまとめておき、 checkboxの選択によってオプション料金を足し算したいのです。 具体的には、下記のようなjsonファイルがあるとします。 "opts": { "option1" : { "1d": 0, "w": 0, "m": 0 }, "option2" : { "1d": 1620, "w": 8316, "m": 14904 }, "option3": { "1d": 540, "w": 3240, "m": 3240 }, "option4": { "1d": 540, "w": 3240, "m": 3240 }, "option5" : { "1d": 540, "w": 1620, "m": 5400 } } checkboxは下記のようになっています。 <input id="option1" type="checkbox" value="option1" name="opts"> <input id="option2" type="checkbox" value="option2" name="opts">  ・  ・ <input id="option5" type="checkbox" value="option5" name="opts"> checkboxが選択されたら、該当する値をjsonから取得して足し算をすることは 出来ますでしょうか? ご教授宜しくお願いいたします。

みんなの回答

  • byDesign
  • ベストアンサー率75% (45/60)
回答No.2

>日数の計算をして、その日数によってベースの金額にチェックされたオプションの金額を足したいのです。 サンプルです。 http://jsfiddle.net/5omxaLoa/ (月は30日固定) サンプル見ても何をしてるか分からない場合、質問をもう少し具体的に書いてください ・checkboxが選択された時に処理がしたいけど、どうすれば良いかわからない? ・jsonファイルを取得する方法が分からない? ・jsonは取得してるけど、そこから値を取得する方法が分からない? ・日にちから、何ヶ月、何週間、何日を求める方法がわからない? >checkboxが選択されたら、該当する値をjsonから取得して足し算をすることは出来ますでしょうか? この質問だと、何がわからなくて質問したいのか分かりません。 出来るかどうか?という質問であれば、回答は『出来ますよ』になります。

全文を見る
すると、全ての回答が全文表示されます。
  • byDesign
  • ベストアンサー率75% (45/60)
回答No.1

何を足したいのか分からなかったのですが、 サンプル作りました、jsonから値を取り出す所などは参考になると思います。 http://jsfiddle.net/jf870v3g/ var json = '{ "opts": { "option1" : { "1d": 0, "w": 0, "m": 0 }, "option2" : { "1d": 1620, "w": 8316, "m": 14904 }, "option3": { "1d": 540, "w": 3240, "m": 3240 }, "option4": { "1d": 540, "w": 3240, "m": 3240 }, "option5" : { "1d": 540, "w": 1620, "m": 5400 }} }'; var obj = $.parseJSON(json); var $input = $('input[name="opts"]'); $input.change(function(){  var d = 0;  var w = 0;  var m = 0;  $input.filter(':checked').each(function(index, checked){   var val = $(checked).val();   d += +(obj.opts[val]['1d']);   w += +(obj.opts[val].w);   m += +(obj.opts[val].m);  });  alert('1d:' + d + ' w:' + w + ' m:' + m); });

immature365
質問者

お礼

サンプルありがとうございます。 何を足したいのかというと、1dとか1wは、1日、1週間という期間になります。 日数の計算をして、その日数によってベースの金額にチェックされたオプションの金額を足したいのです。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • checkbox 特定項目だけを、チェックするには

    こんにちは。いつもお世話になります。 checkbox内で、同じnameの中から特定のものだけ チェックさせるにはどうしたら良いでしょうか。 条件として、name='or52'の部分は変更出来ません。 <input type='button' value='A,B,Cだけを同時にチェック' onclick='checkAll();'> <form action='xxx.cgi' method='post' name='f1'> <input name='or5' type='checkbox' value='A'><br> <input name='or5' type='checkbox' value='B'><br> <input name='or5' type='checkbox' value='C'><br> <input name='or5' type='checkbox' value='D'><br> <input name='or5' type='checkbox' value='E'><br> <input name='or5' type='checkbox' value='F'><br> ......... </form> それで、こんなのをウェブから探してきました。 function checkAll() { for (i=0; i<7; i++) document.f1.elements["or52"+i].checked = true; } そして、同時にチェックしたいものだけ下記の様にしました。 <input name='or52' type='checkbox' value='A' id='or51'> <input name='or52' type='checkbox' value='B' id='or52'> <input name='or52' type='checkbox' value='C' id='or53'> 取りあえずできますが、エラーがでます。 「document.f1.elements["..."]は、objまたはnullではない!」 どうか教えて下さい。よろしくお願いします。

  • checkboxクリックされていないidを取得

    <form id="chkform"> <input type="checkbox" name="check" value="aaa" id="aaa">aaa <input type="checkbox" name="check" value="bbb" id="bbb">bbb <input type="checkbox" name="check" value="ccc" id="ccc">ccc                   ・                   ・                    ・ <input type="checkbox" name="check" value="zzz" id="zzz">zzz </form> チェックボックスの複数の項目の内、チェックされていない全てのIDを取得する方法を教えてください。 よろしくお願いいたします。

  • checkboxについておしえてください

    <form action=" " method="post"> <input type="checkbox" name=" figure" value="1"><img src="a.png"> <input type="checkbox" name=" figure" value="2"><img src="b.png"> <input type="checkbox" name=" figure" value="3"><img src="c.png"> <input type="checkbox" name=" figure" value="4"><img src="a.png"> <input type="checkbox" name=" figure" value="5"><img src="b.png"> <input type="submit" value="送信する"> </form> とした場合に、絵の左にくるチェックボックスの位置を、添付した図のように位置を図の中にもってこれないかと考えています。できれば、大きさも変えたいと考えています。 cssでできるのでしょうか? cssじゃない方法などもあるのでしょうか?よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • checkboxの文字連結の方法を教えてください

    <INPUT name="ch" type="checkbox" value="1">1 <INPUT name="ch" type="checkbox" value="2">2 <INPUT name="ch" type="checkbox" value="3">3 <INPUT name="ch" type="checkbox" value="4">4 <INPUT name="ch" type="checkbox" value="5">5 選択してボタンを押すとチェックされた文字だけをカンマで連結して <a href="http://xxx.xx.ne.jp/xx.cgi?1,3,5">リンク</a> と表示したいのですがどのように書けばいいのでしょうか。 よろしくお願いします。

  • 大量のcheckboxにcheckedを入れる

    チェックボックスが50個あります。 送信ボタンを押して元のページを再度開きます。 そのときにチェックしたボックスにチェックを入れた状態にしたいです。 inputタグの中に<?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>を入れていますが単調になってしまいます。 単調にならずにする方法はありますか? <input type="checkbox" name="chk1[]" value="a1" />の場合はインデックスが固定でないのでできませんでした。 その他いけない箇所があれば教えて下さい。 お願いします。 <?php if(isset($_GET["chk1"])){ $checkbox1 = $_GET["chk1"]; for($i=0; $i<sizeof($checkbox1); $i++){ print $checkbox1[$i]."<br />"; } } if(isset($_GET["chk2"])){ $checkbox2 = $_GET["chk2"]; foreach($checkbox2 as $key => $val){ print $val."<br />"; } } ?> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form method="get" action="checkbox.php"> <input type="checkbox" name="chk1[]" value="a1" /> <input type="checkbox" name="chk1[]" value="a2" /> <input type="checkbox" name="chk1[]" value="a3" /> <input type="checkbox" name="chk1[]" value="a4" /> <input type="checkbox" name="chk1[]" value="a5" /> <input type="checkbox" name="chk1[]" value="a6" /> <input type="checkbox" name="chk1[]" value="a7" /> <input type="checkbox" name="chk1[]" value="a8" /> <input type="checkbox" name="chk1[]" value="a9" /> <input type="checkbox" name="chk1[]" value="a10" /> <br /> <input type="checkbox" name="chk2['b1']" value="b1" <?php if(isset($checkbox2) && in_array('b1',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b2']" value="b2" <?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b3']" value="b3" <?php if(isset($checkbox2) && in_array('b3',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b4']" value="b4" <?php if(isset($checkbox2) && in_array('b4',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b5']" value="b5" <?php if(isset($checkbox2) && in_array('b5',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b6']" value="b6" <?php if(isset($checkbox2) && in_array('b6',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b7']" value="b7" <?php if(isset($checkbox2) && in_array('b7',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b8']" value="b8" <?php if(isset($checkbox2) && in_array('b8',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b9']" value="b9" <?php if(isset($checkbox2) && in_array('b9',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b10']" value="b10" <?php if(isset($checkbox2) && in_array('b10',$checkbox2)){echo ' checked';} ?>/> <br /> <input type="submit" value="送信" /> </form> </body> </html>

    • 締切済み
    • PHP
  • CHECKBOXとTEXTBOXのnameが同じ場合

    下記のようにチェックボックス名とテキストボックス名が同じ場合、エラーになりますが、これをjavascriptのみでうまく処理できる方法はないでしょうか。 #nameは同じまま。 #cgiを経由せず。 #下記と同じことをやりたいわけではありません。単に簡単にしたサンプルです。 <form name="main"> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="東京">東京<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="大阪">大阪<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="その他" onclick="document.main.address.value = 'その他だよ'">その他<BR> <INPUT TYPE="text" NAME="address" SIZE="20"> </form>

  • checkboxの選択数制限と排他処理について

    javascript初心者です。よろしくお願い致します。現在チェックボックスを使用したクイズサイトを作成しており、回答が5つの中から正しいものをチェックし送信するというものです。 その中で、正解数(今回は2つ)以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。 選択数に制限をかけることや排他処理(ラジオボタン)は理解できるのですが、上記の実現方法がどうしても分からず質問させていただきました。 どうかよろしくお願い致します。 <html> <head> <script type="text/javascript"> function check(f,o,m){ var c = i = 0, b = f.elements; for (i; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&b[i].checked&&b[i].parentNode.id==o) c++; for (i = 0; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked&&b[i].parentNode.id==o) b[i-2].checked=false;// これだと2つ前ではなく2番目のチェックボックスが排他になります。 } </script> </head> <body> <form action="#" id="sampleform" onclick="check(this,'options',2);"> <fieldset id="options"><input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> </fieldset> </form> </body> </html>

  • JavaScriptでcheckboxの入力個数制限

    以下のようなチェックボックスがあります。 3つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか? <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>

  • ラジオボタンとチェックボックスの計算について

    ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">~</script>の間が間違っていると思うのですがどうでしょうか? 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。(複数選択可)<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色?<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか?<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年~10年<br> <input name="ch6" value="3" type="radio">9年~5年<br> <input name="ch6" value="1" type="radio">4年~3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>

  • checkboxについて

    初心者で簡単なことだと思われますがわかりません。 以下のようなcheckboxで「表示部分」をJavascriptで変更したい場合はどのように書いたらよいでしょうか。 <INPUT type="checkbox" name="IN1" value="表示">表示部分</INPUT> よろしくお願いいたします。

    • ベストアンサー
    • Java