如何在单选按钮中更改样式

Question

I make an content changer with jquery, when you select an other radio button the content change, this is alright! But i have tried change the radio title style when you make the change. but i'm not getting it

DEMO

Another thing. When you change the content, the height of the box change too. I have tried make a fluid motion using the property transition, but don't work =/

Can anyone help me? Thank you in advance and have a merry christmas

               <form class="my-form-radio">
                    <input data-id="#form-show-item-1" type="radio" name="name" checked /><span class="active"> De Aeroporto para Bairro</span>
                    <input data-id="#form-show-item-2" type="radio" name="name" /><span> De Bairro para Aeroporto</span>
                    <input data-id="#form-show-item-3" type="radio" name="name" /><span> Ida e Volta </span>
                </form>

Answer 1

try something like this, FIDDLE

$('.my-form-radio input').change(function () {

    //console.info(  $(this).attr('href') );
    var section4 = $(this).attr('data-id');
    $(".my-form-radio span").removeClass("active");
    $(this).next().addClass("active");
    $('.dinamic-form-content').hide();
    $(section4).fadeIn(800);

});

NOTE: style is not on radio but on span next to it.

Answer 2

Here is a solution that does not require javascript, only css.

 input[type=radio] {
            display:none; 
            margin:10px;
        }

    input[type=radio] {
        display:inline-block;
        margin:-2px;
        padding: 4px 12px;
        background-color: #e7e7e7;
        border-color: #ddd;
    }

    input[type=radio]:checked { 
       background-image: none;
        background-color:#d0d0d0;
    }

Answer 3

Wrap your radios in <label> . Makes it easier to click since clicking anywhere on label will change the radio

<label for="form-show-item-1" class="active">
     <input data-id="#form-show-item-1" type="radio" name="name" checked /> 
      De Aeroporto para Bairro
</label>

Then you can target the radio parent()

$('.my-form-radio input').change(function() {

      var section4 = $(this).attr('data-id');
        $(".my-form-radio label.active").removeClass("active");
        $(this).parent().addClass("active");
        $('.dinamic-form-content').hide();
        $(section4).fadeIn(800);

  });

DEMO