if radio button checked change parent background color

Question

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 in any other way. Can anyone please help me in this? Solutions other than I had tried will be appreciated. Thanks.

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 1

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/