最终显示不正确的无线电值.我不知道为什么

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

本文关键字：我不知道 为什么 无线电 显示 不正确      更新时间：2023-09-26

我正在使用一些代码将单选按钮显示为图像:

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

问题:

最终在改变单选按钮并点击"选择什么模式?"足够多次后，错误的单选按钮值被提醒。

问题:

我怎样才能每次都得到正确的单选按钮值?

这里是小提琴:Live fiddle Here

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

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

完整的小提琴

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

function testMe() {
var selected_travel_mode = $("input[name=travel_mode]:checked").val();
alert(selected_travel_mode);
}

选择新选项时必须重置单选复选状态

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

尝试这样做:

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>

相关文章：