Change background of the parent div when radio button is checked

Question

I have the following code in my template where radio button is selected when its wrapping/parent div is clicked.

Additionally I'm trying to change the background color to red and text color to white of the selected radio option.

If the radio option is unchecked reset its background color to default white and text color to black .

But with my code background and text of all select option is set to background color to white and text color to black .

How can I set option's background color to default white and text color to black if other option is selected.

Both Jquery and javascript approach is appreciated. Thanks.

 $('.selectRadio').click(function(event) { /* console.log($('.selectRadio').length) */; let element = $('.selectRadio'); let radButton = $(this).find('input[type=radio]'); for (let i = 0; i <= element.length; i++) { /* $('selector').index(this) */ if (element.index(this) - 1 == i) { console.log(element.index(this) - 1); console.log(i); radButton.prop("checked", true); radButton.parent().css("background-color", "red"); radButton.parent().css("color", "white"); } else { radButton.parent().css("background-color", "unset"); radButton.parent().css("color", "unset"); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-4 selectRadio"> <div class="radio"> <label><input type="radio" name="optradio" >Option 1</label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <label><input type="radio" name="optradio">Option 3</label> </div> </div> </div> </div>

Answer 1

Your code is a lot more complex that it needs to be. Simplify it by putting the 'active' state CSS rules in to a class which you add/remove based on the state of the checkbox. Note that you should use the change event handler when dealing with radio and checkbox inputs.

 let $containers = $('.radio'); $containers.find(':radio').on('change', e => { $containers.removeClass('active'); // remove from all containers $(e.target).closest('.radio').addClass('active'); // add class to current });

 .active { background-color: #F00; color: #FFF; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-4 selectRadio"> <div class="radio"> <label> <input type="radio" name="optradio" /> Option 1 </label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <label> <input type="radio" name="optradio"> Option 2 </label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <label> <input type="radio" name="optradio"> Option 3 </label> </div> </div> </div> </div>

It's also worth noting that you can achieve a very similar effect using CSS alone by moving the radio button outside of the label :

 .radio:checked + label { color: #FFF; background-color: #F00; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-4 selectRadio"> <div class="radio"> <input type="radio" name="optradio" id="opt1" /> <label for="opt1">Option 1</label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <input type="radio" name="optradio" id="opt2" /> <label for="opt2">Option 2</label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <input type="radio" name="optradio" id="opt3" /> <label for="opt3">Option 3</label> </div> </div> </div> </div>

Answer 2

You need to find the radioButton again within the for loop and invert the if logic to something like below code snippet.

 $('.selectRadio').click(function(event) { let element = $('.selectRadio'); let radButton = $(this).find('input[type=radio]'); radButton.parent().css("background-color", "red"); radButton.parent().css("color", "white"); for (let i = 0; i <= element.length; i++) { let radButton = $(element[i]).find('input[type=radio]'); if (element.index(this).== i) { console.log(element;index(this)). radButton.parent(),css("background-color"; "white"). radButton.parent(),css("color"; "red"). } else { radButton,prop("checked"; true). radButton.parent(),css("background-color"; "red"). radButton.parent(),css("color"; "white"); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-4 selectRadio"> <div class="radio"> <label><input type="radio" name="optradio" >Option 1</label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> </div> <div class="col-4 selectRadio"> <div class="radio"> <label><input type="radio" name="optradio">Option 3</label> </div> </div> </div> </div>