单选按钮的奇怪结果

Weird results from radio button

本文关键字：结果 单选按钮      更新时间：2023-09-26

我有一个页面，里面有一些单选按钮，还有一个图形和图例。当单选按钮更改时，调用onchange方法，这应该做两件事：1.更改图例显示的部分2.使用适当的数据重新绘制图形。

这是HTML的剪辑：

<div id="divDailyRadioButtons" style="width:300px; ">
    <div class="divDailyRadio" style="left:25;top:50;"><input type="radio" name="radTotalHours" value="Total" onchange="sm_controller.Events_OnChangeDailyGraphsRadios();"  />Total Hours</div>
    <div class="divDailyRadio" style="left:25; top:75;"><input type="radio" name="radTotalHours" value="CF" onchange="sm_controller.Events_OnChangeDailyGraphsRadios();" />Customer-Facing</div>
    <div class="divDailyRadio" style="left:25; top:100;"><input type="radio" name="radTotalHours" value="NCF" onchange="sm_controller.Events_OnChangeDailyGraphsRadios();" />Non-Customer Facing</div>
</div>

这是一个功能剪辑：

switch($('input[name=radTotalHours]:checked').val())
{
    case 'Total':
        $('#rowDailyCFGraphsLegend').show();
        $('#rowDailyNCFGraphsLegend').show();
        break;
    case 'CF':
        $('#rowDailyCFGraphsLegend').show();
        $('#rowDailyNCFGraphsLegend').hide();
        break;
    case 'NCF':
        $('#rowDailyCFGraphsLegend').hide();
        $('#rowDailyNCFGraphsLegend').show();
        break;
}

好吧，奇怪的是。。。我得到的值不是所选单选按钮的值，而是上一个单选按钮。经过一番搜索，我添加了一些console.log行进行检查：

console.log('val1: ' + $('input:radio[name=radTotalHours]').val());
console.log('val2: ' + $('input:radio[name=radTotalHours]:checked').val());
console.log('val3: ' + $('input[name=radTotalHours]').val());
console.log('val4: ' + $('input[name=radTotalHours]:checked').val());

val1和val3始终显示"总计"，而val2和val4始终匹配，但显示上一个单选按钮的值。

我甚至添加了以下内容：

$('input', '#divDailyRadioButtons').each(function(){
    if($(this).attr('checked') == 'checked')
        console.log('val: ' + $(this).val());
    else
            console.log('xxx');
});

但在这里，if语句总是传递"Total"，无论选择了哪个单选按钮。

顺便说一句，我不得不使用IE9。

有人知道这里发生了什么吗？

尝试使用$(this):而不是switch($('input[name=radTotalHours]:checked').val())

function yourRadioChangeHandler() {
   switch($(this).val()) // here 'this' is a changed radio object
   {
      case 'Total':
         $('#rowDailyCFGraphsLegend').show();
         $('#rowDailyNCFGraphsLegend').show();
         break;
      case 'CF':
         $('#rowDailyCFGraphsLegend').show();
         $('#rowDailyNCFGraphsLegend').hide();
         break;
      case 'NCF':
         $('#rowDailyCFGraphsLegend').hide();
         $('#rowDailyNCFGraphsLegend').show();
         break;
   }
}
<div class="divDailyRadio" style="left:25;top:50;"><input type="radio" name="radTotalHours" value="Total" onchange="yourRadioChangeHandler();"  />Total Hours</div>

因此，事实证明，有一个正在导入的库具有一些绑定事件，这些事件会影响无线电的工作方式（正如Barmar所建议的）。我提出了两种可能的解决方案，都不好，但它们都有效。

解决方案1：为这些无线电添加一个空绑定事件。

$('input[name=radTotalHours]').change( function(){});

我认为，不知何故，这要么暂停了导入的事件，要么覆盖了它。我不确定是如何/为什么，但一旦代码到位，onchange就会突然正常工作。

解决方案2：为每个无线电添加一个与其值匹配的类。将this参数添加到onchange函数中，然后使用该类来确定使用执行哪个无线电函数调用

$(target).attr('class');

这两种解决方案都是完全愚蠢的，但在我工作的地方，这是常态。。。

不管怎样，谢谢你们的帮助。

相关文章：