How to change the background of the radio button when it is selected

Asked

Viewed 678 times

1

I have the following problem, I have in my form several questions that are treated using the radio button, as print attached. I am using jquery to change the color of the button when it is selected, the problem is that when the person selects the type of the request and goes in the bottom row to select the service deadline, the top row she had selected loses the selection, And you wouldn’t want that to happen, how do you fix that? A javascrip solution 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>

PRINT

javascript html jquery

  • The name="" of your input radio understands that it is part of the same input group when set to the same value, in your case all inputs have name="motSolic", if each receive a different name, this will not happen when you click on another, because your code will understand that it is not part of the same input group with name="" different, but if you want to keep two input radio options, you should keep two equal values for name=""but in doing so, the selected gets focus and the losing focus will also lose its default css sheet style.

  • Eliseu, I edited the html code of my question, if you notice, the name=", are different, this I had modified and still have problems.

3 answers

2


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

OBS: Try not to use Bootstrap’s default class names elsewhere, such as putting the class="btn" in a Div

OBS2: Another thing. Do not remove the BTN class from the button, work only with the styling class 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>

Look at the result, I think that’s 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>
  <script src="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>

  • Hugo, good afternoon, I would like to change the default color to 'btn-info' without harming what has already been selected, as I do this?

  • @Marcilioeloi now that I understand better what you wanted. Bootstrap has some particularities with hierarquia de classe, take a look at the code you’ll understand better.

  • It worked Hugo, thank you very much for your attention.

  • @Marcilioeloi glad it worked, tmj!

1

1

Hello!

I don’t know if I understand very well what you need, but I usually change the appearance of the radio with the same css checked property. I climbed an example in codepen if you want to take a look: https://codepen.io/juunegreiros/pen/eyyVEV

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

  • Good afternoon Juliana, I would like to change the color of the btn-default button to btn-info without harming what has already been selected elsewhere in my form.

  • Good afternoon! The problem I saw is that your script takes the classes from all btn, including those active elsewhere. I believe that specify by input resolve! $("input[type='radio']:not(:checked)"). Parent(). removeClass(). addClass('btn'). addClass('btn-default');

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.