最终显示不正确的无线电值..无法弄清楚为什么

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');
            }
    });
});

问题：

最终，在更改单选按钮并单击 "What mode is selected?" 次后，系统会警告错误的单选按钮值。

问题：

如何才能每次都获得正确的单选按钮值？

这里是fiddle：Live Fiddle Here

Answer 1

在函数内定义变量，以便每次都重置它。

function testMe() {

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

alert(selected_travel_mode);

}

Answer 2

当 select 新的时，您必须重置无线电检查状态。

    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 3

我刚刚添加了一行来清除所有复选框：

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

满Fiddle

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>

最终显示不正确的无线电值..无法弄清楚为什么

incorrect radio value eventually shown.. can't figure out why

javascript

event-handling

getelementbyid

radio-button

jquery-events