Question

I m trying to add a class to the selected radio input and then remove that class when another radio of the same type is selected

The radio buttons have the class radio_button but i can t get the class to change with the below code.

  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

您选择器中有一个额外的空格导致了这个问题。

而不是：

$( 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

Give each radio button a unique ID
Pass the ID on the click
Remove the "focussed" class name for all the radio buttons with the same class
Add the "focussed" class to the radio button with the ID you passed

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

友情链接