Q&A
余談ですが、ラジオボタンを2度クリックすると解除するやり方がスマートだなと。 二度押しで選択解除できるラジオボタン | 技術屋ネオビットの覚え書き http://www.neobit.jp/archives/446
選んだラジオボタンのvalue値でリアルタイム計算をし、又選んだラジオボタンの内容を別のテーブルに表示して、その横のボタンで選択解除してリストからも消去できる、というページを作成途中です。
いまの状態ですと、例えばアイテム1の100円のものとアイテム2の300円のものを選んで合計値が400円になった後、アイテム1の選択をボタンで解除して、合計値が300円の状態になっても、表示は400円のままになってしまいます。（codepen）
これを、選択解除した際にも計算されて正しい合計値を表示できるようにしたいのですが、どのように修正すればよいでしょうか？お力添え頂けると嬉しいです。
html
1 2<body> 3 4 <div id="wrap"> 5 6 <form name="myform" id="estform"> 7 8 <div class="item-block test-block" > 9 <div class="item-list"> 10 <input type="radio" name="test" value="100" >アイテム1(100円) 11 <input type="radio" name="test" value="200" >アイテム1(200円) 12 </div> 13 </div><!-- /test-block--> 14 15 <div class="item-block test2-block"> 16 <div class="item-list"> 17 <input type="radio" name="test2" value="300" >アイテム2(300円) 18 <input type="radio" name="test2" value="400" >アイテム2(400円) 19 </div> 20 </div><!-- /test2-block--> 21 22 23 <table class="est-ex-table"> 24 <thead> 25 <tr> 26 <th scope="col">内容</th> 27 <th scope="col">価格</th> 28 </tr> 29 </thead> 30 <tbody> 31 <tr class="est-line est-put est-test"> 32 </tr> 33 <tr class="est-line est-put est-test2"> 34 </tr> 35 </tbody> 36 </table> 37 38 <div class="for-total"> 39 <p>合計</p> 40 <span id="for-total-span"><input type="text" name="total" value="0">円</span> 41 </div> 42 43 </form> 44 45 </div> 46<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> 47<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 48<script type="text/javascript" src="js/custm.js"></script> 49</body> 50
Javascript
1 2//アイテムのクリックを監視 3var item_check = document.querySelectorAll('.item-list input'); 4for(i=0;i<item_check.length;i++){ 5 item_check[i].addEventListener('change', function(e){ 6 price_sum(); 7 }); 8} 9 10//合計計算 11function price_sum(){ 12 var sum = 0; 13 14 for(var i = 0 ; i < item_check.length ; i ++){ 15 if(item_check[i].checked){ 16 sum += parseInt(item_check[i].value); 17 } 18 } 19 document.myform.total.value=sum; 20} 21 22 23/* 24 *見積もり詳細 25 */ 26 27 const testcheckbox = document.querySelectorAll("input[name='test']"); 28 const item_price = document.getElementById("estform").test; 29 const itemform = document.getElementsByClassName('est-test'); 30 31 for (const target of testcheckbox) { 32 target.addEventListener('change', function () { 33 for (let i = 0; i < testcheckbox.length; i++) { 34 if (testcheckbox[i].checked){ 35 const itemtable = '<td><button class="fa-toggle-x" type="button" data-fa="test"><i class="fa-solid fa-circle-xmark"></i></button>アイテム1</td>'+ 36 '<td>'+item_price.value+'円</td>'; 37 itemform[0].innerHTML = itemtable; 38 } 39 } 40 }); 41} 42 43 44const test2checkbox = document.querySelectorAll("input[name='test2']"); 45const item2_price = document.getElementById("estform").test2; 46const itemform2 = document.getElementsByClassName('est-test2'); 47 48for (const target of test2checkbox) { 49 target.addEventListener('change', function () { 50 for (let i = 0; i < test2checkbox.length; i++) { 51 if( test2checkbox[i].checked){ 52 const item2table = '<td><button class="fa-toggle-x" type="button" data-fa="test2"><i class="fa-solid fa-circle-xmark"></i></button>アイテム2</td>'+ 53 '<td>'+item2_price.value+'円</td>'; 54 itemform2[0].innerHTML = item2table; 55 } 56 } 57 }); 58} 59 60 61 62$(document).on('click', '.fa-toggle-x', function () { 63 64 let id = $(this).data('fa'); 65 66 // もしチェックが入っていたら 67 if ($("."+ id + "-block input").prop('checked')) { 68 // チェックを外す 69 $("."+ id + "-block input").prop('checked', false); 70 $(".est-" + id).empty(); 71 } 72 else{ 73 $("."+ id + "-block input").prop('checked', false); 74 $(".est-" + id).empty(); 75 } 76 77}); 78 79
そうですよね。実際のページでは他にも要素が色々あって、テーブルは表に出ていて、このラジオボタンはたどり着くまで3クリックくらいステップがあるので、ワンクリックでパッと解除できた方が良いかなと思いこの実装にしたのですが、参考にさせていただきます。ありがとうございます！
回答1件
0
ベストアンサー
js
1$(document).on('click', '.fa-toggle-x', function () {
この関数でチェック状態を操作していますが、プログラムからチェック状態を変更した場合は change イベントが発生せず、price_sum() が呼ばれません。
なので、この関数の中で price_sum() を呼べば良いです。
投稿2022/06/22 02:26
総合スコア20884
ありがとうございます！
ご指摘通り$(document).on('click', '.fa-toggle-x', function () {の中でprice_sum()を呼び出したら解決いたしました。
単純なことで悩んでいてお恥ずかしい限りですが、とても助かりました。ありがとうございました。
あなたの回答
tips
プレビュー
