1

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.

Community
  • 1
  • 1
anonymous
  • 41
  • 2
  • 7
  • Can you please at-least your js code that you tried ? – mlimon Oct 25 '16 at 07:55
  • @mlbd added tried code. please check question. – anonymous Oct 25 '16 at 08:10
  • 1
    Sorry, But first you said you "how I should apply jquery/javascript to change color of my selected li item." but as far as i can see it's work fine. here is your code with fiddle https://jsfiddle.net/tr9Lyxz3/ and did you also want to change parent `ul` class as well ? – mlimon Oct 25 '16 at 08:21
  • @mlbd But its getting background color for just `li` click, it does not checking whether radio button checked or not. – anonymous Oct 25 '16 at 08:38
  • Because you didn't check the radio button event. – mlimon Oct 25 '16 at 08:45

1 Answers1

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/

mlimon
  • 661
  • 8
  • 19
  • somehow on my page that radio button checked event is not working. – anonymous Oct 25 '16 at 08:51
  • I had tried by giving `else`. On my page, its going in in `else` part and also background color gets applied even if radio button is not checked, on just `li` click. – anonymous Oct 25 '16 at 09:04
  • However its working fine for double click on radio button. – anonymous Oct 25 '16 at 09:41
  • Sorry I didn't get you :( . anyway what version jQuery you are using ? and is it working and with single clicked checked ? – mlimon Oct 25 '16 at 17:30
  • for single click, when we checked radio, its not changing background color i.e. for single click above code is not working. Its working fine for double click. I am using `jquery-1.8.3.min.js`. – anonymous Oct 25 '16 at 17:51