将类“固定”到选定的单选按钮？答案

【问题标题】："Pin" a class to the selected radio button?将类“固定”到选定的单选按钮？
【发布时间】：2010-09-30 02:33:06
【问题描述】：

我正在尝试向选定的无线电输入添加一个类然后在选择另一个相同类型的收音机时删除该类

单选按钮具有“radio_button”类，但我无法获取使用以下代码更改的类。

  jQuery(".radio_button").livequery('click',function() {  

      $('input.radio_button :radio').focus(updateSelectedStyle);
      $('input.radio_button :radio').blur(updateSelectedStyle);
      $('input.radio_button :radio').change(updateSelectedStyle);
  }
  function updateSelectedStyle() {
      $('input.radio_button :radio').removeClass('focused');
      $('input.radio_button :radio:checked').addClass('focused');
  }

【问题讨论】：

很好的问题，因为我了解了 livequery 插件。顺便说一句，您的代码示例缺少一个大括号“)”。

标签： javascript jquery button radio-button

【解决方案1】：

给每个单选按钮一个唯一的 ID
在点击时传递 ID
删除所有具有相同类的单选按钮的“聚焦”类名称
使用您传递的 ID 将“focussed”类添加到单选按钮

【讨论】：

【解决方案2】：

Tre 问题是由选择器中的一个额外空格引起的。

代替：

$('input.radio_button :radio')

你想写：

$('input.radio_button:radio')

【讨论】：

【解决方案3】：

首先，我同意 Rene Saarsoo 关于额外空间的回答。

其次，您是否也尝试将样式应用于单选按钮标签？您可能想以某种方式将按钮和标签包装在一起。例如：

<span class="radiowrapper"><input type="radio" name="system" value="1" class="radio_button"> 1</span>
<br>
<span class="radiowrapper"><input type="radio" name="system" value="2" class="radio_button"> 2</span>

然后摆脱你的 livequery 调用中的额外调用，并将代码从 updateSelectedStyle() 函数移动到你的 livequery 调用中（否则我注意到 IE 的问题）：

   jQuery(".radio_button").livequery('click',function() {
        $('input.radio_button:radio').parent(".radiowrapper").removeClass('focused');
        $('input.radio_button:radio:checked').parent(".radiowrapper").addClass('focused');
   });

【讨论】：

【解决方案4】：

您可能还想利用 jQuery 的可链接性来减少您正在做的工作量。（而不是一遍又一遍地重新找到这些按钮。）像这样：

  jQuery(".radio_button").livequery('click',function() {  
    $('input.radio_button:radio')
      .focus(updateSelectedStyle)
      .blur(updateSelectedStyle)
      .change(updateSelectedStyle);
  });
  function updateSelectedStyle() {
    $('input.radio_button:radio')
      .removeClass('focused')
      .filter(':checked').addClass('focused');
  }

【讨论】：