Question

我希望您在我选择时帮助我如何更改按钮收音机的颜色。我的代码会有各种按钮收音机，所以当选择另一个时，已标记的内容必须继续，如何使用jquery或JavaScript执行此操作？

HTML：

 <div class="row form-group">
                <div class="col-md-8">
                    <div class="btn" data-toggle="buttons">
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" id="motNovaFuncao" value=3 autocomplete=off> Nova Função
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" id="motRemanejamento" value=4 autocomplete=off> Remanejamento
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" id="motAumentoQuadro" value=5 autocomplete=off> Aumento de Quadro
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" id="motSubstituicao" value=6 autocomplete=off> Substituição de Colaborador
                        </label>                    
                    </div> 

                  </div>   
            </div>

JQUERY

<script>
                            $(document).ready(function(){
                                $('#identAbertura').change(function(){
                                    $('.btn').removeClass().addClass('btn').addClass('btn-default');
                                    $(this).parent().removeClass("btn-default").addClass("btn-success");
                                });
                                $('#identMov').change(function(){
                                    $('.btn').removeClass().addClass('btn').addClass('btn-default');
                                    $(this).parent().removeClass("btn-default").addClass("btn-success");
                                });
                            });
                        </script>

Print

Answer 1

单选按钮颜色无法更改。但是你可以改变它的背景或文字颜色。

input[type="radio"]:checked{ 
   background : red;
}

Answer 2

你需要使用jquery来实现这种效果。看起来您没有在代码中添加jquery

这是工作小提琴

＆＃13;

$('.mot_solic').change(function(e){
 $(this).parent().siblings().removeClass('selected')
 $(this).parent().addClass('selected');
 console.log($(this));
});

＆＃13;

.selected {
   background-color: #999;
}

＆＃13;

<div class="row form-group">
                <div class="col-md-8">
                    <div class="btn" data-toggle="buttons">
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" class='mot_solic' id="motNovaFuncao" value=3 autocomplete=off> Nova Função
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" class='mot_solic' id="motRemanejamento" value=4 autocomplete=off> Remanejamento
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" class='mot_solic' id="motAumentoQuadro" value=5 autocomplete=off> Aumento de Quadro
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="motSolic" class='mot_solic' id="motSubstituicao" value=6 autocomplete=off> Substituição de Colaborador
                        </label>                    
                    </div> 

                  </div>   
            </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何在选择时更改背景单选按钮

2 个答案: