質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16368questions

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

  • jQuery

    6686questions

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

jQueryでradioのname属性によるチェック判定がしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 456
退会済みユーザー

退会済みユーザー

前提・実現したいこと

いつもお世話になります。
現在radioのname属性によるチェック判定で条件分岐をする
プログラムを作成しているのですが、複数の要素があった場合、最初のradio要素のみしかチェックが入っていると判定してくれません。
これを、最初のradio以外にチェックをいれてもチェック判定が入るようにしたいのですが、うまくできませんでした。
お手数おかけしますが、ご教授お願い致します。

※10000文字を超えてしまったのでHTMLは省略しております。

該当のソースコード

<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>

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報
開発環境URL
https://js-form-price-test2-yujiokayama.c9users.io/index.html

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

凡ミスでした。
グローバル変数に
var selectItem = 0;
を定義して解決でした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

<script>
$(function(){
  $("input[name='variation']").on('change', function () {
    var optionValue = $("[name=variation]:checked").val();
    console.log(optionValue);
  });
});
</script>
<input type="radio" name="variation" value="1">1
<input type="radio" name="variation" value="2">2
<input type="radio" name="variation" value="3">3


抜粋してソースの通りやっても普通にvalは拾えているように見えますが
どこが問題になっているとお考えですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/13 15:57

    yambejpさん
    レスありがとうございます。
    お手数ですが開発環境の
    https://js-form-price-test2-yujiokayama.c9users.io/index.html
    を見て頂くと
    天面/床面:プラグイン / 黒マット にチェックを入れてから個数の変更をすると
    正常に金額の乗算ができるのですが、それ以外にチェックを入れた場合の計算がうまくいきません。
    チェックを入れてない判定になってしまい、デフォルトの金額に除算された金額になっていまいます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16368questions

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

  • jQuery

    6686questions

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