Question

我使用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>

Answer 1

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

});

注意：样式不在广播中，而是在旁边的样式上。

Answer 2

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

Answer 3

将您的无线电包裹在<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

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

3 个答案: