javascript - 最终显示不正确的 radio 值..不明白为什么

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

问题:

最终在更改单选按钮并单击“选择什么模式？”之后错误单选按钮值被警告的次数足够多。

问题:

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

这是 fiddle :Live Fiddle Here

Answer 1

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

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

完整Fiddle