代码之家 › 专栏 › 技术社区 › AaronDT

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

css html javascript

AaronDT · 技术社区 · 7 年前

我在这里找到了一个很好的例子: CSS - How to Style a Selected Radio Buttons Label? 尝试设计我使用javascript动态创建的一组单选按钮。当我设法创建按钮时,我找不到如何更改当前选中的单选按钮标签背景的解决方案。在我的例子中,颜色只会在悬停期间改变,但除了被选中之外,还会翻转回正常状态。

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

2 回复 | 直到 7 年前

Davi 7 年前

https://jsfiddle.net/urbandrone/y49df8wv/1/

另外,我在更改代码的地方添加了注释。基本上,你想做的是不包 <input> 元素 在…内 A. <label> ,但是 在它旁边 并通过 id <输入> 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>

.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 */
}

JS公司

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

ksav 7 年前

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/