Question

我正在尝试将类添加到所选的无线电输入中然后在选择了另一个相同类型的无线电时删除该类

单选按钮的类型为“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');
  }

Answer 1

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

而不是：

$('input.radio_button :radio')

你想写：

$('input.radio_button:radio')

Answer 2

您可能还希望利用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');
  }

Answer 3

为每个单选按钮添加唯一ID
点击
删除所有具有相同类别的单选按钮的“焦点”类名称
将“焦点”类添加到带有您传递的ID的单选按钮

Answer 4

首先，我同意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 个答案: