How to change the radio button background when it is selected

Navigation
1

I have the following problem, I have on my form several issues that are handled using the radio button, as print attached. I'm using jquery to change the color of the button when it's selected, the problem is that when the person selects the type of the request and goes on the bottom line to select the service deadline, the top line that she had selected loses the selection , and would not want that to happen, how to fix it? A solution in javascrip would also suit me.

HTML 

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

                  </div>   
            </div>

            <div class="row form-group">
                <div class="col-md-4">
                    <label>Prazo do Serviço:</label>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-md-4">
                    <div class="btn" data-toggle="buttons">
                        <label class="btn btn-info">
                            <input type="radio" name="prazoServico" id="motTemporario" value=7 autocomplete=off> Temporário
                        </label>
                        <label class="btn btn-info">
                            <input type="radio" name="prazoServico" id="motIndeterminado" value=8 autocomplete=off> Indeterminado
                        </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>

    
asked by anonymous 08.01.2018 / 15:50

3 answers

2

Edit: After the comment it became clearer what you wanted. Follow the code.

OBS: Try not to use Bootstrap default class names elsewhere, such as putting class="btn" to Div

OBS2: Another thing. Do not remove the BTN class from the button, work only with the stylization classes as btn-primary btn-default btn-danger etc ...

I used this script 

<script>
    $('.container').on('click', '.btn', function() {
      $(this).addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-default');
    });
</script>

See the result, I think this is what you wanted. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  
</style>
</head>
<body>
  
    <div class="row form-group">
        <div class="col-md-8">
            <div class="container" 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>

    <div id="tile-sort" class="row form-group">
        <div class="col-md-8">
            <div class="container" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="sort-goodbye" value=3 autocomplete=off> Temporário
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="motSolic" id="motIndeterminado" value=4 autocomplete=off> Indeterminado
                </label>                 
            </div> 
        </div>   
    </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    $('.container').on('click', '.btn', function() {
      $(this).addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-default');
    });
</script>

</body>
</html>
    
08.01.2018 / 16:02
1

JQuery 

   $('input:radio').bind('click', function() {
        $(this).toggleClass('red');
         //.....seu código
    });

CSS 

 input{
        background:#FFFFEE;
    }
    .red{
        background-color:red;
    }

Sources: link

link

    
08.01.2018 / 16:11
1

Hello

I do not know if I understood very well what I need, but I usually change the appearance of the radio with the checked property of the same css. I put an example in the codepen if you want to take a look: link

HTML 

<input type="radio" name="exemplo" id="ex1" value="1">
<label for="ex1"></label>

<input type="radio" name="exemplo" id="ex2" value="2">
<label for="ex2"></label>

CSS 

input{
  display: none
}
label{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;
  opacity: .8;
}
input:checked + label{
  background-color: red;
  opacity: 1;
}
    
08.01.2018 / 16:12
PHP - using isset and GETs Is there any way to remove all sysout from a Project?