Question

我有四列无线电列表。我想更改所选项目的背景颜色和边框。我在我的代码上应用了一些stackoverflow答案，如

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

但是由于我的结构有四列不能正常工作。有时，如果我从列中选择一种语言，则每个其他列的最后一个选项都会获得背景颜色。有时会选择多个单选按钮。

我没有得到应该如何应用jquery / javascript以任何其他方式更改所选li项的颜色。有人可以帮我吗？除了我尝试过的解决方案，我们将不胜感激。感谢。

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代码：

    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和CSS代码：

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

在上面的代码中，我尝试过更改我的所有4列的ul类的名称，并尝试为每列分组/给出相同名称的单选按钮，并相应地更改js代码，但它不起作用正常。

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

以上代码也无效。

Answer 1

试试这个

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

在这里玩https://jsfiddle.net/tr9Lyxz3/1/

如果选中单选按钮更改父背景颜色

1 个答案: