Question

我有一个带有一些单选按钮的页面以及图形和图例。当单选按钮改变时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始终显示＆＃34; Total＆＃34;而val2和val4始终匹配，但显示上一个单选按钮的值。

我甚至添加了以下内容：

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

但是这里if语句总是为＆＃39; Total＆＃39;传递，无论选择哪个无线电。

作为旁注，我被迫使用IE9。

任何人都知道这里发生了什么？

Answer 1

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

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>

Answer 2

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

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

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

我认为这会以某种方式暂停导入的事件或覆盖它。我不确定如何/为什么，但是一旦这段代码到位，onchange就会突然正常工作。

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

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

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

无论如何，感谢帮助人员。

单选按钮的奇怪结果

2 个答案: