选中单选按钮时更改父 div 的背景

Question

我的模板中有以下代码，当单击其包装/父 div 时选择单选按钮。

此外，我正在尝试将所选单选选项的背景颜色更改为red，并将文本颜色更改为white。

如果未选中单选选项，则将其背景颜色重置为默认white，将文本颜色重置为black。

但我的代码背景和所有选择选项的文本设置为背景颜色为white，文本颜色为black。

如果选择了其他选项，如何将选项的背景颜色设置为默认white，将文本颜色设置为black。

Jquery 和 javascript 方法都值得赞赏。谢谢。

$('.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 class="container">
  <div class="row">
    <div class="col-4 selectRadio">
      <div class="radio">
        <label><input type="radio" name="optradio" >Option 1</label>
      </div>

    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <label><input type="radio" name="optradio">Option 2</label>
      </div>
    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <label><input type="radio" name="optradio">Option 3</label>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要在 for 循环中再次找到 radioButton，并将 if 逻辑反转为类似于以下代码 sn-p 的内容。

$('.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 class="container">
  <div class="row">
    <div class="col-4 selectRadio">
      <div class="radio">
        <label><input type="radio" name="optradio" >Option 1</label>
      </div>

    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <label><input type="radio" name="optradio">Option 2</label>
      </div>
    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <label><input type="radio" name="optradio">Option 3</label>
      </div>
    </div>
  </div>
</div>

Answer 2

您的代码比它需要的复杂得多。通过将“活动”状态 CSS 规则放入一个类来简化它 您根据复选框的状态添加/删除。请注意，在处理单选和复选框输入时，您应该使用change 事件处理程序。

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 class="container">
  <div class="row">
    <div class="col-4 selectRadio">
      <div class="radio">
        <label>
          <input type="radio" name="optradio" />
          Option 1
        </label>
      </div>
    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <label>
          <input type="radio" name="optradio">
          Option 2
        </label>
      </div>
    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <label>
          <input type="radio" name="optradio">
          Option 3
        </label>
      </div>
    </div>
  </div>
</div>

还值得注意的是，您可以通过将单选按钮移到label之外单独使用CSS来实现非常相似的效果：

.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 class="container">
  <div class="row">
    <div class="col-4 selectRadio">
      <div class="radio">
        <input type="radio" name="optradio" id="opt1" />          
        <label for="opt1">Option 1</label>
      </div>
    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <input type="radio" name="optradio" id="opt2" />          
        <label for="opt2">Option 2</label>
      </div>
    </div>
    <div class="col-4 selectRadio">
      <div class="radio">
        <input type="radio" name="optradio" id="opt3" />          
        <label for="opt3">Option 3</label>
      </div>
    </div>
  </div>
</div>