JQuery：单击radiobutton时更改类

Question

I need some help with javascript.

Here is the link to the code in JSFIDDLE: http://jsfiddle.net/Gopher69/B98kZ/4/

My JS is:

$(document).ready(function() {
//add the Selected class to the checked radio button
$('[type=radio]').parent().addClass("selected");
//If another radio button is clicked, add the select class, and remove it from the       previously selected radio
$('input').click(function() {
    $('input:not(:checked)').parent().removeClass("radio  validate-one-required-by-name product-custom-option").find("class").html("radio  validate-one-required-by-name product-custom-option");
    $('input:checked').parent().addClass("radio  validate-one-required-by-name product-custom-option").find("class").html("radio  validate-one-required-by-name product-custom-option active");
});});

I want to adjust the the background color for the radio buttons just like I did with the hover effect with css. So I need to add something like "checked" to the class when the radiobutton is active.

I found this post but I'm juts not getting foreword: jQuery Checkbox selection and change class

If somebody could help me out, I would be very thankfull.

Answer 1

you can use pure css to do this:

  input[type="radio"]:checked {
    /* put some style here */
  }

Answer 2

$("#" + radioelementid).on("change",function(){  
$(this).addClass("testClass")   
//or   
$(this).removeClass("testClass");
});

Answer 3

Based on @Krunal Goswami's answer - even shorter:

$("#" + elementId).on("change",function(){
    $(this).toggleClass("checked");
});

Note

That should do your trick. Although I don't recommend using this. Instead try a 'custom checkbox' implementation / jQuery plugin since native browser checkboxes don't really like being styled (cross browser).