Wenn Radio Button überprüft ändern Eltern Hintergrundfarbe

Question

Ich habe vier Spalten von Radio-Listen. Ich möchte Hintergrundfarbe und Rahmen des ausgewählten Elements ändern. Ich habe einige Antworten auf meine Stackoverflow Code wie

1. If radio button checked change parent div (li) background - javascript
2. Changing background color with CSS on radio button input when :checked

angewendet Aber als meine Struktur mit vier Spalten seine nicht richtig funktioniert. Manchmal, wenn ich eine Sprache aus der ersten Spalte auswähle, erhält die letzte Option der anderen Spalte die Hintergrundfarbe. Manchmal werden mehrere Optionsfelder ausgewählt.

Ich bekomme nicht, wie ich jquery/javascript anwenden sollte, um Farbe meines vorgewählten li Einzelteils in jeder anderen Weise zu ändern. Kann mir bitte jemand dabei helfen? Andere Lösungen als ich versucht haben, werden geschätzt. Vielen Dank.

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 und CSS-Code, die ich versucht hatte:

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

Im obigen Code hatte ich versucht, indem ich den Namen der Klasse ul aller meiner 4 Spalten änderte und versuchte, indem ich den gleichen Namen von Radiobuttons für jede Spalte gruppierte/gab und dementsprechend den Code js änderte, aber es funktionierte nicht richtig.

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

Der obige Code funktioniert auch nicht.

Answer 1

wie diese https://jsfiddle.net/tr9Lyxz3/1/