anonymous anonymous - 1 month ago 13
HTML Question

if radio button checked change parent background color

I have four columns of radio lists. I want to change background color and border of selected item. I have applied some stackoverflow answers on my code like


  1. If radio button checked change parent div (li) background - javascript

  2. Changing background color with CSS on radio button input when :checked



But as my structure is having four columns its not working properly. Sometimes if I select one language from column first then last option of each other column gets background color. Sometimes multiple radio buttons are gets selected.

I am not getting how I should apply jquery/javascript to change color of my selected
li
item. Can anyone please help me in this?

HTML code:

<div class="added">
<div class="column-left">
<ul class="options-list">
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
English
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="radio">
German
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" data-toggle="radio">
Japanese
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4" data-toggle="radio">
Russian
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio" >
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5" data-toggle="radio">
Other
</label>
</li>
</ul>
</div>
<div class="column-center">
<ul class="options-list">
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios6" value="option6" data-toggle="radio">
Arabic
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios7" value="option7" data-toggle="radio">
Hebrew
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios8" value="option8" data-toggle="radio">
Korean
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios9" value="option9" data-toggle="radio">
Spanish
</label>
</li>
</ul>

</div>
<div class="column-center-right">
<ul class="options-list">
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios10" value="option10" data-toggle="radio">
Chinese
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios11" value="option11" data-toggle="radio">
Hindi
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios12" value="option12" data-toggle="radio">
Polish
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios13" value="option13" data-toggle="radio">
Taiwanese
</label>
</li>

</ul>
</div>
<div class="column-right">
<ul class="options-list">
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios14" value="option14" data-toggle="radio">
French
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios15" value="option15" data-toggle="radio">
Italian
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios16" value="option16" data-toggle="radio">
Portuguese
</label>
</li>
<li class="ng-scope" ng-repeat="way in group.paymentWays" ng-switch="" on="way.type">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios17" value="option17" data-toggle="radio">
Vietnamese
</label>
</li>

</ul>
</div>

</div>


CSS code:

ul.options-list {
margin: 0;
display: block;
list-style: none;
font-family: Arial;
padding-left: 110px;
text-align: left;
width: 215px;
}
ul.options-list li {
position: relative;
padding: 17px 17px;
background-color: #F6F6F6;
color: #2a4753;
/* cursor: pointer;*/
max-height: 150px;
overflow: hidden;
border: 1px solid #DDDDDD;
border-radius: 8px;
margin-bottom: 16px;
margin-top: 15px;
}
div.added {
padding: 0px 0px 5px 0px;
font-size: 22px;
font-family: Arial;
color: #2a4753;
text-align: left;
}
.column-left{ float: left; width: 22%; text-align: center;}
.column-right{ float: left; width:22%;text-align: center; }
.column-center{ float: left; width: 22%; text-align: center;}
.column-center-right{ float: left; width: 22%; text-align: center;}


JS and CSS code that I had tried:

function updateHighlightRadio() {
var selected = this.parentNode.parentNode.parentNode.getElementsByClassName("selected")[0];
if (selected) selected.className = selected.className.replace(" selected", "");
this.parentNode.parentNode.className += " selected";
}

window.onload = function () {
var radios = document.querySelectorAll("input[type=radio]");
for (var i = 0; i < radios.length; ++i) {
radios[i].onchange = updateHighlightRadio;
}
}

.options-list .selected {
background-color: #E8F2F4;
}


In above code I had tried by changing name of my all 4 column's
ul
class and tried by grouping/giving same name of radio buttons for each column and accordingly changing
js
code but its not working properly.

$(document).ready(function() {
$("ul.options-list li").on("click",function() {
$('ul.options-list li').removeClass('sel_bk_color');
$(this).addClass('sel_bk_color');
});
});

.sel_bk_color{
background-color: #E8F2F4;
}


Above code also not working.

Answer

Try like this

$(document).ready(function() {
   $("ul.options-list li").on("click",function() {
        if($(this).find('input[type="radio"]').is(':checked')) { 
          $('ul.options-list li').removeClass('sel_bk_color');
          $(this).addClass('sel_bk_color');
        }
    });
});

Play Here https://jsfiddle.net/tr9Lyxz3/1/

Comments