如何更改单选按钮的样式答案

【问题标题】：How to change style in the radio button如何更改单选按钮的样式
【发布时间】：2013-12-25 04:45:41
【问题描述】：

我用 jquery 做了一个内容更改器，当您选择另一个单选按钮时，内容更改，这没关系！但是当您进行更改时，我尝试更改广播标题样式。但我没听懂

另一件事。当你改变内容时，盒子的高度也会改变。我尝试使用属性转换进行流畅的运动，但不起作用 =/

谁能帮帮我？提前谢谢你，祝你圣诞快乐

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

【问题讨论】：

标签： javascript jquery html forms radio-button

【解决方案1】：

将您的收音机包裹在 <label> 中。更容易点击，因为点击标签上的任何地方都会改变收音机

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

然后你就可以瞄准电台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

【讨论】：

【解决方案2】：

试试这样的，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);

});

注意：样式不在收音机上，而是在旁边的跨度上。

【讨论】：

【解决方案3】：

这是一个不需要 javascript，只需要 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;
    }

【讨论】：