设置所选单选按钮的背景颜色答案

【问题标题】：Set background color of selected radio button设置所选单选按钮的背景颜色
【发布时间】：2019-04-13 20:45:36
【问题描述】：

我正在关注我在此处找到的出色示例：CSS - How to Style a Selected Radio Buttons Label? 尝试设置一组单选按钮的样式，这些单选按钮是我使用 javascript 动态创建的。虽然我设法创建按钮，但我找不到有关如何更改当前选定单选按钮标签背景的解决方案。在我的示例中，颜色仅在悬停期间发生变化，但除了被选中外，还会恢复正常。

我在 JSFiddle 上的代码：https://jsfiddle.net/dsarh65p/2/

供参考：

HTML

<html>
  <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div class="btn-group" data-toggle="buttons">
      <span id=car></span>
    </div>
  </body>
</html>

var array = ["Saab", "Volvo", "BMW"];
var item = document.createElement('div');
item.className = 'radio-toolbar';

for (var i = 0; i < array.length; i++) {

  var input = document.createElement('input');
  var input_label = document.createElement('label');

  input.type = 'radio';
  input.name = 'radio-btn';
  input.id = 'radio' + i;
  input.value = "true";
  input_label.innerHTML = array[i];

  input_label.setAttribute("class", "btn btn-primary");
  input_label.appendChild(input);


  item.appendChild(input_label);
  document.getElementById("car").appendChild(item);
}

CSS

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked {
  background-color: #bbb;
}

【问题讨论】：

更新的 JSFiddle-link - 在原始问题中有旧版本
链接示例中的标记与您的不同。

标签： javascript html css

【解决方案1】：

var array = ["Saab", "Volvo", "BMW"];
var item = document.createElement('div');
item.className = 'radio-toolbar';

for (var i = 0; i < array.length; i++) {

  var input = document.createElement('input');
  var input_label = document.createElement('label');

  input.type = 'radio';
  input.name = 'radio-btn';
  input.id = 'radio' + i;
  input.value = "true";
  input_label.innerHTML = array[i];

  input_label.addEventListener('click', function(element) {
    document.querySelectorAll('.radio-toolbar label').forEach((labelEl) => {
      labelEl.selected = false;
      labelEl.style.backgroundColor = '#ddd';
    });
    element.selected = true;
    element.style.backgroundColor = 'red';
  }.bind(this, input_label));

  input_label.setAttribute("class", "btn btn-primary");
  input_label.appendChild(input);



  item.appendChild(input_label);
  document.getElementById("car").appendChild(item);
}

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked {
  background-color: #bbb;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<body>
  <div class="btn-group" data-toggle="buttons">
    <span id=car></span>
  </div>
</body>

链接：https://jsfiddle.net/dsarh65p/24/

编辑：

使用单个侦听器和类名更新小提琴： https://jsfiddle.net/dsarh65p/26/

【讨论】：

非常感谢！您的 addEventListener 解决了它！ :)
@AlonShmiel 好点。更新小提琴：jsfiddle.net/dsarh65p/26

【解决方案2】：

我在这里更新了你的小提琴： https://jsfiddle.net/urbandrone/y49df8wv/1/

另外，我在更改代码的所有地方都添加了 cmets。基本上，你想要做的是不将<input>元素inside包裹在<label>中，而是在它旁边并连接两者它们通过<input> 的id 属性和<label> 的for 属性。这样，您可以仅使用 CSS 更改标签的背景颜色，这几乎总是比使用 JavaScript 更好。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="btn-group" data-toggle="buttons">
    <span id=car></span>
  </div>
</body>
</html>

CSS

.radio-toolbar input[type="radio"] {
    display: none;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #ddd;
    padding: 4px 11px;
    font-family: Arial;
    font-size: 16px;
    cursor: pointer;
}

.radio-toolbar .radio {     /* style the wrapper */
    position: relative;     /* allows to "hide" the radio with absolute positioning (won't occupy space) */
    display: inline-block;  /* show wrappers in horizontal line */
}

.radio-toolbar input[type="radio"] { /* hide the <input> */
    position: absolute;
    z-index: -1;
}

.radio-toolbar input[type="radio"]:checked + label { /* target the <label> */
    background-color: #000;                          /* changed to more obvious color */
}

var array = ["Saab", "Volvo", "BMW"];
var item = document.createElement('div');
item.className = 'radio-toolbar';

for (var i = 0; i < array.length; i++) {

  var wrapper = document.createElement('div'); // <-- create a wrapper element
  var input = document.createElement('input');
  var input_label = document.createElement('label');

  input.type = 'radio';
  input.name = 'radio-btn';
  input.id = 'radio' + i;
  input.checked = i === 0;
  input.value = array[i]; // <-- <input>s should have different values

  input_label.htmlFor = 'radio' + i; // <-- connect label to <radio> via for-attribute
  input_label.innerHTML = array[i];
  input_label.className = "btn btn-primary";
  input_label.appendChild(input);

  wrapper.className = 'radio';      // <-- add a class to the wrapper
  wrapper.appendChild(input);       // <-- add the <input>
  wrapper.appendChild(input_label); // <-- add the <label>


  item.appendChild(wrapper);        // <-- add wrapper to toolbar
  document.getElementById("car").appendChild(item);
}

【讨论】：

绝对喜欢您的解决方案！非常感谢！