###前提・実現したいこと
いつもお世話になります。
現在radioのname属性によるチェック判定で条件分岐をする
プログラムを作成しているのですが、複数の要素があった場合、最初のradio要素のみしかチェックが入っていると判定してくれません。
これを、最初のradio以外にチェックをいれてもチェック判定が入るようにしたいのですが、うまくできませんでした。
お手数おかけしますが、ご教授お願い致します。
※10000文字を超えてしまったのでHTMLは省略しております。
###該当のソースコード
javascript
1<script type="text/javascript"> 2 3$(function() { 4 5 // チェックされた値をコンソール出力 6 $("input:radio[name='variation']").change(function() { 7 var row = $(this).closest('tr').index(); 8 var col = $(this).closest('td').index(); 9 $("select[name='option01'] > option:lt(" + row + ") ").prop("selected", "selected"); 10 $("select[name='option02'] > option:lt(" + col + ") ").prop("selected", "selected"); 11 }); 12 13 //デフォルトの金額を取得 14 var defaultPrice = $('.itemPrice').text().replace(/[^0-9]/g, ''); 15 16 //radioボタンの選択状況により金額を変更する 17 $("input[name='variation']").on('change', function () { 18 19 optionValue = $("[name=variation]:checked").val() 20 21 switch (optionValue) { 22 case "7_6": 23 selectItem = 216; 24 addOtionValue(selectItem); 25 break; 26 case "7_4": 27 selectItem = 648; 28 addOtionValue(selectItem); 29 break; 30 case "7_5": 31 selectItem = 1188; 32 addOtionValue(selectItem); 33 break; 34 case "8_6": 35 selectItem = 324; 36 addOtionValue(selectItem); 37 break; 38 case "8_4": 39 selectItem = 756; 40 addOtionValue(selectItem); 41 break; 42 case "8_5": 43 selectItem = 1296; 44 addOtionValue(selectItem); 45 break; 46 case "9_6": 47 selectItem = 432; 48 addOtionValue(selectItem); 49 break; 50 case "9_4": 51 selectItem = 864; 52 addOtionValue(selectItem); 53 break; 54 case "9_5": 55 selectItem = 1404; 56 addOtionValue(selectItem); 57 break; 58 case "10_6": 59 selectItem = 540; 60 addOtionValue(selectItem); 61 break; 62 case "10_4": 63 selectItem = 972; 64 addOtionValue(selectItem); 65 break; 66 case "10_5": 67 selectItem = 1512; 68 addOtionValue(selectItem); 69 break; 70 case "11_6": 71 selectItem = 748; 72 addOtionValue(selectItem); 73 break; 74 case "11_4": 75 selectItem = 1080; 76 addOtionValue(selectItem); 77 break; 78 case "11_5": 79 selectItem = 1620; 80 addOtionValue(selectItem); 81 break; 82 case "12_6": 83 selectItem = 756; 84 addOtionValue(selectItem); 85 break; 86 case "12_4": 87 selectItem = 1188; 88 addOtionValue(selectItem); 89 break; 90 case "12_5": 91 selectItem = 1728; 92 addOtionValue(selectItem); 93 break; 94 95 default: 96 break; 97 } 98 }); 99 100 function addOtionValue(selectItem) { 101 $(".itemPrice").text((parseInt(defaultPrice) + parseInt(selectItem)).toLocaleString() + "円"); 102 } 103 104 105 //数量が変更された場合 106 $('[name="cnt"], .FS2_figure_table_td_updn_btn input[type="button"]').on('keyup keydown touchstart touchend click', function() { 107 108 var valCnt = $('[name="cnt"]').val(); 109 110 //オプション未選択の場合 111 if( !$('[name=variation]').prop('checked') ) { 112 $(".itemPrice").text( (parseInt(defaultPrice) * valCnt).toLocaleString() + "円"); 113 } 114 //オプション選択の場合 115 else if( $('[name=variation]').prop('checked') ) { 116 $(".itemPrice").text(((parseInt(defaultPrice) + parseInt(selectItem)) * valCnt).toLocaleString() + "円"); 117 } 118 119 //オプション未選択の場合 120 console.log(!$('[name=variation]').prop('checked')); 121 //オプション選択の場合 122 console.log($('[name=variation]').prop('checked')); 123 124 }); 125 126 // 0~9, テンキ―0~9, スペース, backspace, delete, →, ←, 以外は入力キャンセル 127 $('[name="cnt"]').on('keyup keydown touchstart touchend', function(e) { 128 var k = e.keyCode; 129 if(!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 32 || k == 8 || k == 46 || k == 39 || k == 37)) { 130 return false; 131 } 132 }); 133}); 134 135function countUp(obj){ 136 if(obj==null) 137 return false; 138 139 if(obj.value == null || obj.value =='' || isNaN(obj.value)){ 140 obj.value=1; 141 return false; 142 } 143 144 value=parseInt(obj.value)+1; 145 if(value<=0) 146 value = 1; 147 148 obj.value=value; 149 150 return false; 151} 152 153function countDown(obj){ 154 if(obj==null) 155 return false; 156 157 if(obj.value==null || obj.value =='' || isNaN(obj.value)){ 158 obj.value=1; 159 return false; 160 } 161 162 value=parseInt(obj.value)-1; 163 if(value<=0) 164 value = 1; 165 166 obj.value=value; 167 168 return false; 169} 170 171</script>
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
開発環境URL
https://js-form-price-test2-yujiokayama.c9users.io/index.html
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。