間違ったラジオ値は、最終的に示す..なぜ

Question

私は画像のようにラジオボタンを表示するためにいくつかのコードを使用しています把握することはできません。

HTML：

<div id="skin_1" title="Walk"> 
    <input type="radio" name="travel_mode" id="mode_walking" value="WALKING" /><br> 
    Walk 
</div> 

<div id="skin_2" title="Drive"> 
    <input type="radio" name="travel_mode" id="mode_driving" value="DRIVING" /><br> 
    Drive 
</div> 

<div id="skin_3" title="Bike"> 
    <input type="radio" name="travel_mode" id="mode_bicycle" value="BICYCLING" /><br> 
    Bike 
</div> 

<div id="skin_4" title="Transit"> 
<input type="radio" name="travel_mode" id="mode_transit" value="TRANSIT" /><br> 
Transit 
</div> 

<div> 
    <a href="#" onClick="testMe();">What mode is selected?</a> 
</div> 

JS：

$(function() { 
    $('input:radio').hide().each(function() { 
     var label = $("label[for=" + '"' + this.id + '"' + "]").text(); 
     $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '') + ' class="radio-fx ' + this.name + '" href="#"><span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this); 
    }); 
    $('.radio-fx').on('click', function (e) { 
     $check = $(this).prev('input:radio'); 
     var unique = '.' + this.className.split(' ')[1] + ' span'; 
       $(unique).attr('class', 'radio'); 
       $(this).find('span').attr('class', 'radio-checked'); 
       $check.attr('checked', true); 
      }).on('keydown', function (e) { 
       if ((e.keyCode ? e.keyCode : e.which) == 32) { 
        $(this).trigger('click'); 
      } 
    }); 
}); 

を問題：

最終的にラジオボタンを変更して「どのモードが選択されていますか」をクリックした後WRONGラジオボタンの値が警告されるのに十分な時間。

質問：

いつでもラジオボタンの正しい値を取得できますか。ここで

はフィドルです：それはそれぞれの時間にリセットされますようにLive Fiddle Here

Answer 1

私は、すべてのチェックボックスをクリアするために1行を追加しました：

$('.radio-fx').on('click', function (e) { 
    $("input[name=travel_mode]").removeAttr("checked"); // add this line 
    ..... 

全Fiddle

Answer 2

は、関数内の変数を定義します。

function testMe() { 

var selected_travel_mode = $("input[name=travel_mode]:checked").val(); 

alert(selected_travel_mode); 

} 

Answer 3

新しいものを選択すると、ラジオチェック状態をリセットする必要があります。

var pre; 
      $('.radio-fx').on('click', function (e) { 
       if(pre!==undefined) 
        $(pre).attr('checked',false);     
       pre = $(this).prev('input:radio'); 
       $check = $(this).prev('input:radio'); 
       var unique = '.' + this.className.split(' ')[1] + ' span'; 
       $(unique).attr('class', 'radio'); 
       $(this).find('span').attr('class', 'radio-checked'); 
       $check.attr('checked', true); 
      }).on('keydown', function (e) { 
       if ((e.keyCode ? e.keyCode : e.which) == 32) { 
        $(this).trigger('click'); 
       } 
      }); 
     }); 

Answer 4

は、本実施例のように何かをしてみてください。

function testMe() { 
 
    if ($("input:radio[name='travel_mode']").is(":checked")) { 
 
    alert($("input:radio[name='travel_mode']:checked").attr("value")); 
 
    // or 
 
    alert($("input:radio[name='travel_mode']:checked").val()); 
 
    } else { 
 
    alert("You must make a choice!"); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="skin_1" title="Walk"> 
 
    <input type="radio" name="travel_mode" id="mode_walking" value="WALKING" /><br> 
 
    Walk 
 
</div> 
 

 
<div id="skin_2" title="Drive"> 
 
    <input type="radio" name="travel_mode" id="mode_driving" value="DRIVING" /><br> 
 
    Drive 
 
</div> 
 

 
<div id="skin_3" title="Bike"> 
 
    <input type="radio" name="travel_mode" id="mode_bicycle" value="BICYCLING" /><br> 
 
    Bike 
 
</div> 
 

 
<div id="skin_4" title="Transit"> 
 
<input type="radio" name="travel_mode" id="mode_transit" value="TRANSIT" /><br> 
 
Transit 
 
</div> 
 

 
<div> 
 
    <a href="#" onClick="testMe();">What mode is selected?</a> 
 
</div>