>source

배경색을 동일하게 유지하고 싶습니다. <ul> 밝은 회색으로.

현재 라디오 버튼을 클릭하면 ul 배경이 잘못 변경됩니다. 사용 가능한 모든 ul을 통해 jquery 스크립트 루프를 만드는 방법을 모르겠습니다.이 개념이 100+ ul에 적용될 것이므로 스크립트가 작을 수 있다면 정말 감사하겠습니다.

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

ul.options-list li.change_color{
        background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Q1
  <ul class="options-list">
    <li>
        <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
    </li>
    <li>
        <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
    </li>
  </ul>
</div>
<div>
  Q2
  <ul class="options-list">
    <li>
        <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
    </li>
    <li>
        <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
    </li>
  </ul>
</div>

  • 답변 # 1

    당신은 당신의 ul li 사용 each 루프 다음 ​​사용 $(this) 이것에 따라 라디오가 확인되는지 확인하려면 add 또는 remove 수업.

    데모 코드:

    $(document).ready(function() {
      $("ul.options-list li").on("click", function() {
      //loop through ul li 
        $("ul.options-list li").each(function() {
          if ($(this).find('input[type="radio"]').is(':checked')) {
            $(this).addClass('change_color');//add change_Color
          } else {
            $(this).removeClass('change_color');//remove same
          }
        })
      });
    });
    
    

    ul.options-list li.change_color {
      background-color: lightgray;
    }
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>
      Q1
      <ul class="options-list">
        <li>
          <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
        </li>
        <li>
          <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
        </li>
      </ul>
    </div>
    
    <div>
      Q2
      <ul class="options-list">
        <li>
          <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
        </li>
        <li>
          <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
        </li>
      </ul>
    </div>
    
    

  • 답변 # 2

    나는 자바 스크립트에 좋지 않습니다.

    하지만 모든 라디오 버튼에 동일한 클래스를 부여하고 다음과 같이 추가 할 수 있습니다.

    document.getElementByClass ( "myCheck"). checked = true;

    그런 다음 선택한 항목에 클래스 ( 'change_color')를 추가합니다.

    https://www.w3schools.com/jsref/prop_checkbox_checked.asp

관련 자료

  • 이전 reactjs - VS Code에서 JSDoc을 켜면 " '--jsx'플래그가 제공되지 않으면 JSX를 사용할 수 없습니다"가 생성됩니다
  • 다음 javascript - 라우터를 사용하여 한 구성 요소에서 다른 ReactJS로 전달 된 데이터에 액세스하는 방법