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

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

javascript html css

Javascript 设置所选单选按钮的背景色,javascript,html,css,Javascript,Html,Css,我遵循我在这里找到的一个很好的例子：尝试设计一组单选按钮，我使用javascript动态创建这些按钮。虽然我设法创建了按钮，但我找不到如何更改当前选中单选按钮标签背景的解决方案。在我的示例中，颜色仅在悬停期间更改，但除了被选中外，还会翻转回正常状态我在JSFIDLE上的代码：供参考： HTML var数组=[“萨博”、“沃尔沃”、“宝马”]； var item=document.createElement（'div'）； item.className='收音机工具栏'；对于（var i=

我遵循我在这里找到的一个很好的例子：尝试设计一组单选按钮，我使用javascript动态创建这些按钮。虽然我设法创建了按钮，但我找不到如何更改当前选中单选按钮标签背景的解决方案。在我的示例中，颜色仅在悬停期间更改，但除了被选中外，还会翻转回正常状态

我在JSFIDLE上的代码：

供参考：

HTML

var数组=[“萨博”、“沃尔沃”、“宝马”]；
var item=document.createElement（'div'）；
item.className='收音机工具栏'；
对于（var i=0；i{
labelEl.selected=false；
labelEl.style.backgroundColor='#ddd'；
});
element.selected=true；
element.style.backgroundColor='红色'；
}.bind（这个，输入_标签））；
输入_label.setAttribute（“类”、“btn btn主”）；
输入\标签。追加子项（输入）；
item.appendChild（输入_标签）；
文件.getElementById（“car”）.appendChild（项目）；
}

.radio工具栏输入[type=“radio”]{
显示：无；
}
.收音机工具栏标签{
显示：内联块；
背景色：#ddd；
填充：4px11px；
字体系列：Arial；
字体大小：16px；
光标：指针；
}
.收音机工具栏输入[type=“radio”]：选中{
背景色：#bbb；
}

我在这里更新了您的小提琴：

另外，我在修改代码的地方添加了注释。基本上，您要做的不是将

元素包装在

中，而是将它们放在

旁边，并通过

的

id

属性和

的

属性将它们连接起来。这样，您可以仅使用CSS更改标签的背景颜色，这几乎总是比使用JavaScript更好

HTML


CSS
.radio工具栏输入[type=“radio”]{
显示：无；
}
.收音机工具栏标签{
显示：内联块；
背景色：#ddd；
填充：4px11px；
字体系列：Arial；
字体大小：16px；
光标：指针；
}
.radio工具栏.radio{/*设置包装器的样式*/
位置：相对；/*允许使用绝对定位“隐藏”收音机（不会占用空间）*/
显示：内联块；/*以水平线显示包装器*/
}
.radio工具栏输入[type=“radio”]{/*隐藏*/
位置：绝对位置；
z指数：-1；
}
.radio工具栏输入[type=“radio”]：选中+标记{/*目标*/
背景色：#000；/*更改为更明显的颜色*/
}

JS
var数组=[“萨博”、“沃尔沃”、“宝马”]；
var item=document.createElement（'div'）；
item.className='收音机工具栏'；
对于（var i=0；ivar wrapper=document.createElement（'div'）；//更新的JSFIDLE链接-原始版本链接中的标记与您的不同。非常感谢！您的addEventListener解决了它！：@AlonShmiel很好。更新的fiddle:非常喜欢您的解决方案！非常感谢！
<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);
}

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

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

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