選択した商品の金額が、リアルタイムで出力される機能を作っております。
■ 対象コード
参考サイト:http://sample-program.xyz/
console.log(scores)は配列の中身を確認するために書いております。
html
1 <main id="main"> 2 <div id='app'> 3 <div class="box"> 4 <input type="radio" name="one" data-price="100"> 5 <input type="radio" name="one" data-price="200"> 6 <input type="radio" name="one" data-price="300"> 7 <input type="radio" name="one" data-price="400"> 8 <input type="radio" name="one" data-price="500"> 9 <input type="radio" name="one" data-price="600"> 10 <input type="radio" name="one" data-price="700"> 11 </div> 12 <a href="#" id="submit" title="">送信</a> 13 14 <div class="box"> 15 <input type="radio" class="run" name="model" value="100" data-price="10"> 16 <input type="radio" class="run" name="model" value="200" data-price="20"> 17 <input type="radio" class="run" name="model" value="300" data-price="30"> 18 19 </div> 20 21 <div class="box"> 22 <input type="radio" class="run" name="rank" value="400" data-price="100"> 23 <input type="radio" class="run" name="rank" value="500" data-price="200"> 24 <input type="radio" class="run" name="rank" value="600" data-price="300"> 25 </div> 26 27 <div class="box"> 28 <input type="radio" class="run" name="jamp" value="400" data-price="1000"> 29 <input type="radio" class="run" name="jamp" value="500" data-price="2000"> 30 <input type="radio" class="run" name="jamp" value="600" data-price="3000"> 31 </div> 32 33 <div class="box"> 34 <input type="radio" class="run" name="bomb" value="400" data-price="10000"> 35 <input type="radio" class="run" name="bomb" value="500" data-price="20000"> 36 <input type="radio" class="run" name="bomb" value="600" data-price="30000"> 37 </div> 38 39 <div class="box"> 40 <input type="checkbox" name="bomb" value="400" data-price="1"> 41 <input type="checkbox" name="bomb" value="500" data-price="2"> 42 <input type="checkbox" name="bomb" value="600" data-price="3"> 43 </div> 44 45 <div class='text-right'> 46 <p> 小計¥ <span id="sum">0</span></p> 47 <p>消費税¥ <span id="tax">0</span></p> 48 <p> 合計¥ <span id="all">0</span></p> 49 </div> 50 51 </div> 52 </main> 53 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 54 <script> 55 $(function() { 56 var scores = []; 57 $(':radio.run').on('change',function() { 58 scores = $(':radio:checked').map(function(){ 59 return parseInt($(this).data("price")); 60 }).get(); 61 sum = scores.reduce((a,x)=>a+x); 62 $("#sum").text(sum); 63 $("#tax").text(sum * 0.1); 64 $("#all").text(sum + sum* 0.1); 65 console.log(scores); 66 }); 67 68 $('a#submit').on('click', function() { 69 scores = $(':radio:checked').map(function(){ 70 return parseInt($(this).data("price")); 71 }).get(); 72 sum = scores.reduce((a,x)=>a+x); 73 $("#sum").text(sum); 74 $("#tax").text(sum * 0.1); 75 $("#all").text(sum + sum* 0.1); 76 console.log(scores); 77 }); 78 79 $(':checkbox').on('click', function() { 80 scores = $(':checkbox:checked').map(function(){ 81 return parseInt($(this).data("price")); 82 }).get(); 83 sum = scores.reduce((a,x)=>a+x); 84 console.log(scores); 85 }); 86 87 }); 88 89 </script>
■ 現状の課題
input:radio
の値は全て同じ配列に追加することはできました。
ただ、input:checkbox
の値は、同じ配列に追加することができませんでした。
input:radio
及びinput:checkbox
の値を、全て同じ配列に入れ、小計に出力したいです。
■ 質問
2つ質問があります。
【質問1】
checkbox:checked
のdata-price
の値も、配列scores
に追加したいのですが、現状できておりません。
radio:checked
と同様、配列scores
に追加することは可能でしょうか。
【質問2】
jQueryの中に、全く同じコードが3つあります。
1つにまとめることはできないでしょうか。
<対象コード>
jquery
1 <script> 2sum = scores.reduce((a,x)=>a+x); 3$("#sum").text(sum); 4$("#tax").text(sum * 0.1); 5$("#all").text(sum + sum* 0.1); 6</script> 7
何卒、よろしくおねがいいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/11/19 06:31 編集
2019/11/19 06:34
退会済みユーザー
2019/11/19 06:42 編集
2019/11/19 06:47
退会済みユーザー
2019/11/19 06:52
2019/11/19 07:07 編集
退会済みユーザー
2019/11/19 07:10
2019/11/19 07:13 編集
退会済みユーザー
2019/11/19 07:23 編集
退会済みユーザー
2019/11/19 07:26 編集
2019/11/19 07:28
退会済みユーザー
2019/11/19 07:32
2019/11/19 07:41
退会済みユーザー
2019/11/19 07:46
2019/11/19 07:51
退会済みユーザー
2019/11/19 07:53