title: Change background of the parent div when radio button is checked
body: <p>I have the following code in my template where radio button is selected when its wrapping/parent div is clicked.</p>
  <p>Additionally I'm  trying to change the background color  to <code>red</code> and text color to <code>white</code> of the selected radio option.</p>
  <p>If the radio option is unchecked reset its background color to default <code>white</code> and text color to <code>black</code>.</p>
  <p>But with my code background and text of all select option is set to background color  to <code>white</code> and text color to <code>black</code>.</p>
  <p>How can I set option's background color to default <code>white</code> and text color to <code>black</code> if other option is selected.</p>
  <p>Both Jquery and javascript approach is appreciated. Thanks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.selectRadio').click(function(event) {
    /* console.log($('.selectRadio').length) */
    ;
    let element = $('.selectRadio');
    let radButton = $(this).find('input[type=radio]');
    for (let i = 0; i &lt;= element.length; i++) {
      /* $('selector').index(this) */
      if (element.index(this) - 1 == i) {
        console.log(element.index(this) - 1);
        console.log(i);
        radButton.prop("checked", true);
        radButton.parent().css("background-color", "red");
        radButton.parent().css("color", "white");
      } else {
        radButton.parent().css("background-color", "unset");
        radButton.parent().css("color", "unset");
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-4 selectRadio"&gt;
        &lt;div class="radio"&gt;
          &lt;label&gt;&lt;input type="radio" name="optradio" &gt;Option 1&lt;/label&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col-4 selectRadio"&gt;
        &lt;div class="radio"&gt;
          &lt;label&gt;&lt;input type="radio" name="optradio"&gt;Option 2&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-4 selectRadio"&gt;
        &lt;div class="radio"&gt;
          &lt;label&gt;&lt;input type="radio" name="optradio"&gt;Option 3&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>