jQueryでradioのname属性によるチェック判定がしたい
- 評価
- クリップ 0
- VIEW 1,656

退会済みユーザー
前提・実現したいこと
いつもお世話になります。
現在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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
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は拾えているように見えますが
どこが問題になっているとお考えですか?
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.09%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる