質問編集履歴

1 誤字

退会済みユーザー

退会済みユーザー

2017/02/13 15:40  投稿

jQueryでradioのname属性によるチェック判定がしたい
###前提・実現したいこと
いつもお世話になります。
現在radioのname属性によるチェック判定で条件分岐をする
プログラムを作成しているのですが、複数の要素があった場合、最初のradio要素のみしかチェックが入っていると判定してくれません。
これを、最初のradio以外にチェックをいれてもチェック判定が入るようにしたいのですが、うまくできませんでした。
お手数おかけしますが、ご教授お願い致します。
※10000文字を超えてしまったのでHTMLは省略しております。
###該当のソースコード
```javascript
<script type="text/javascript">
$(function() {
   
  // チェックされた値をコンソール出力       
  $("input:radio[name='variation']").change(function() {
          var row = $(this).closest('tr').index();
          var col = $(this).closest('td').index();
          $("select[name='option01'] > option:lt(" + row + ") ").prop("selected", "selected");
          $("select[name='option02'] > option:lt(" + col + ") ").prop("selected", "selected");
  });       
     
 //デフォルトの金額を取得
 var defaultPrice = $('.itemPrice').text().replace(/[^0-9]/g, '');
 
 //radioボタンの選択状況により金額を変更する
     $("input[name='variation']").on('change', function () {
         
     optionValue = $("[name=variation]:checked").val()
     switch (optionValue) {
       case "7_6":
         selectItem = 216;
         addOtionValue(selectItem);
         break;
       case "7_4":
         selectItem = 648;
         addOtionValue(selectItem);
         break;
       case "7_5":
         selectItem = 1188;
         addOtionValue(selectItem);
         break;
       case "8_6":
         selectItem = 324;
         addOtionValue(selectItem);         
         break;
       case "8_4":
         selectItem = 756;
         addOtionValue(selectItem);
         break;
       case "8_5":
         selectItem = 1296;
         addOtionValue(selectItem);
         break;
       case "9_6":
         selectItem = 432;
         addOtionValue(selectItem);
         break;
       case "9_4":
         selectItem = 864;
         addOtionValue(selectItem);
         break;
       case "9_5":
         selectItem = 1404;
         addOtionValue(selectItem);
         break;
       case "10_6":
         selectItem = 540;
         addOtionValue(selectItem);
         break;
       case "10_4":
         selectItem = 972;
         addOtionValue(selectItem);
         break;
       case "10_5":
         selectItem = 1512;
         addOtionValue(selectItem);
         break;
       case "11_6":
         selectItem = 748;
         addOtionValue(selectItem);
         break;
       case "11_4":
         selectItem = 1080;
         addOtionValue(selectItem);
         break;
       case "11_5":
         selectItem = 1620;
         addOtionValue(selectItem);
         break;
       case "12_6":
         selectItem = 756;
         addOtionValue(selectItem);
         break;
       case "12_4":
         selectItem = 1188;
         addOtionValue(selectItem);
         break;
       case "12_5":
         selectItem = 1728;
         addOtionValue(selectItem);
         break;         
       
        default:
         break;
     }       
     });
   
   function addOtionValue(selectItem) {
       $(".itemPrice").text((parseInt(defaultPrice) + parseInt(selectItem)).toLocaleString() + "円");
   }
     
   
   //数量が変更された場合
   $('[name="cnt"], .FS2_figure_table_td_updn_btn input[type="button"]').on('keyup keydown touchstart touchend click', function() {
       
       var valCnt = $('[name="cnt"]').val();
       
       //オプション未選択の場合
       if( !$('[name=variation]').prop('checked') ) {
           $(".itemPrice").text( (parseInt(defaultPrice) * valCnt).toLocaleString() + "円");
       }
       //オプション選択の場合
       else if( $('[name=variation]').prop('checked') ) {
           $(".itemPrice").text(((parseInt(defaultPrice) + parseInt(selectItem)) * valCnt).toLocaleString() + "円");
       }           
       
       //オプション未選択の場合
       console.log(!$('[name=variation]').prop('checked'));
       //オプション選択の場合
       console.log($('[name=variation]').prop('checked'));                           
     
   });       
   
   // 0~9, テンキ―0~9, スペース, backspace, delete, →, ←, 以外は入力キャンセル
   $('[name="cnt"]').on('keyup keydown touchstart touchend', function(e) {
       var k = e.keyCode;
       if(!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 32 || k == 8 || k == 46 || k == 39 || k == 37)) {
           return false;
       }
   });       
});
function countUp(obj){
 if(obj==null)
   return false;
 if(obj.value == null || obj.value =='' || isNaN(obj.value)){
   obj.value=1;
   return false;
 }
 value=parseInt(obj.value)+1;
 if(value<=0)
   value = 1;
 obj.value=value;
 
 return false;
}
function countDown(obj){
 if(obj==null)
   return false;
 if(obj.value==null || obj.value =='' || isNaN(obj.value)){
   obj.value=1;
   return false;
 }
 value=parseInt(obj.value)-1;
 if(value<=0)
   value = 1;
 obj.value=value;
 
 return false;
}
</script>
```
###試したこと  
optionValue = $("[name=variation]:checked").val();  
という箇所を  
optionValue = $("[name=radio-group]:checked").val();  
のようにしましたが、ダメでした。  
 
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
開発環境URL
https://js-form-price-test2-yujiokayama.c9users.io/index.html
  • JavaScript

    35065 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    12800 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る