I have the following code in my template where radio button is selected when its wrapping/parent div is clicked.

Additionally I'm trying to change the background color to red and text color to white of the selected radio option.

If the radio option is unchecked reset its background color to default white and text color to black.

But with my code background and text of all select option is set to background color to white and text color to black.

How can I set option's background color to default white and text color to black if other option is selected.

Both Jquery and javascript approach is appreciated. Thanks.

$('.selectRadio').click(function(event) {
  /* console.log($('.selectRadio').length) */
  ;
  let element = $('.selectRadio');
  let radButton = $(this).find('input[type=radio]');
  for (let i = 0; i <= 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");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <label><input type="radio" name="optradio" >Option 1</label>
      </div>

    </div>
    <div >
      <div >
        <label><input type="radio" name="optradio">Option 2</label>
      </div>
    </div>
    <div >
      <div >
        <label><input type="radio" name="optradio">Option 3</label>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Your code is a lot more complex that it needs to be. Simplify it by putting the 'active' state CSS rules in to a class which you add/remove based on the state of the checkbox. Note that you should use the change event handler when dealing with radio and checkbox inputs.

let $containers = $('.radio');
$containers.find(':radio').on('change', e => {
  $containers.removeClass('active'); // remove from all containers
  $(e.target).closest('.radio').addClass('active'); // add class to current
});

.active {
  background-color: #F00;
  color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <label>
          <input type="radio" name="optradio" />
          Option 1
        </label>
      </div>
    </div>
    <div >
      <div >
        <label>
          <input type="radio" name="optradio">
          Option 2
        </label>
      </div>
    </div>
    <div >
      <div >
        <label>
          <input type="radio" name="optradio">
          Option 3
        </label>
      </div>
    </div>
  </div>
</div>

It's also worth noting that you can achieve a very similar effect using CSS alone by moving the radio button outside of the label:

.radio :checked   label {
  color: #FFF;
  background-color: #F00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <input type="radio" name="optradio" id="opt1" />          
        <label for="opt1">Option 1</label>
      </div>
    </div>
    <div >
      <div >
        <input type="radio" name="optradio" id="opt2" />          
        <label for="opt2">Option 2</label>
      </div>
    </div>
    <div >
      <div >
        <input type="radio" name="optradio" id="opt3" />          
        <label for="opt3">Option 3</label>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You need to find the radioButton again within the for loop and invert the if logic to something like below code snippet.

$('.selectRadio').click(function(event) {
  let element = $('.selectRadio');
  let radButton = $(this).find('input[type=radio]');
  radButton.parent().css("background-color", "red");
  radButton.parent().css("color", "white");
  for (let i = 0; i <= element.length; i  ) {
    let radButton = $(element[i]).find('input[type=radio]');
    if (element.index(this) !== i) {
      console.log(element.index(this));
      radButton.parent().css("background-color", "white");
      radButton.parent().css("color", "red");
    } else {
      radButton.prop("checked", true);
      radButton.parent().css("background-color", "red");
      radButton.parent().css("color", "white");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <label><input type="radio" name="optradio" >Option 1</label>
      </div>

    </div>
    <div >
      <div >
        <label><input type="radio" name="optradio">Option 2</label>
      </div>
    </div>
    <div >
      <div >
        <label><input type="radio" name="optradio">Option 3</label>
      </div>
    </div>
  </div>
</div>