Question

我正在遵循我在这里找到的出色示例：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>

JS

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;
}

Answer 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/

Answer 2

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

此外，我在更改代码的所有位置添加了注释。基本上，您要做的是不将<input>元素包装在<label>内的内，而是紧随其后的并通过id的{{1}}属性和<input>的{{1}}属性将它们连接起来。这样，您可以仅使用CSS更改标签的背景颜色，这几乎总是比使用JavaScript更好。

HTML

for

CSS

<label>

JS

<!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>

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

2 个答案: