如何将选中的单选按钮的值添加到单独的元素中

时间：2015-07-18 11:07:33

标签： javascript html css

如何在不覆盖现有类的情况下将已选中的单选按钮的值添加到单独的div中？

我＆＃39;遇到麻烦，因为我喜欢在页面加载时加载已检查的单选按钮的值，我也喜欢正确更新类。 我的函数覆盖现有的类而不是添加第二个。

＆＃13;
＆＃13; 
document.addEventListener('DOMContentLoaded', function() {
   
   var radioButtons = document.getElementsByName('color');
   var paragraph = document.querySelector('.folder');
  
    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});

document.addEventListener('DOMContentLoaded', function() {
size
   var radioButtons = document.getElementsByName('size');
   var paragraph = document.querySelector('.folder');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});

document.addEventListener('DOMContentLoaded', function() {
   
   var radioButtons = document.getElementsByName('bordercolor');
   var paragraph = document.querySelector('.folder');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});
＆＃13; 
.folder {
    width:100px;
    height: 60px;
    border: 5px solid;
    background: #111;
    transition: all 0.3s;
}




.radio-toolbar {
    display:block;
	float: left;
    padding: 20px;
    width: 33%;
    box-sizing: border-box;
}


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

.radio-toolbar label {
    display:block;
	width: 100%;
	float: left;
    background-color:#ddd;
    padding:4px 11px;
    font-size:16px;
	margin-bottom: 5px;
	cursor: pointer;
}

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

.black {
    background-color:#000;
}

.white {
    background-color:#fff;
}

.green {
    background-color:#00CC00;
}


.size100 {
    width: 100px;
}

.size200 {
    width: 200px;
}

.size300 {
    width: 300px;
}


.borderYellow {
    border-color: #FFFF33;
}


.borderBlue {
    border-color: #3333FF;
}


.borderOrange {
    border-color: #FF9933;
}

.size200 {
    width: 200px;
}

.size300 {
    width: 300px;
}
＆＃13; 
<div class="folder">
</div> 





<div class="radio-toolbar">
   
    <input type="radio" id="radio1" name="color" value="black" checked>
    <label for="radio1">black</label>

    <input type="radio" id="radio2" name="color" value="white">
    <label for="radio2">white</label>

    <input type="radio" id="radio3" name="color" value="green">
    <label for="radio3">green</label> 

</div>


 <div class="radio-toolbar">
   
    <input type="radio" id="radio4" name="size" value="size100" checked>
    <label for="radio4">size 10</label>

    <input type="radio" id="radio5" name="size" value="size200">
    <label for="radio5">size 20</label>

    <input type="radio" id="radio6" name="size" value="size300">
    <label for="radio6">size 30</label> 

</div>


 <div class="radio-toolbar">
   
    <input type="radio" id="radio7" name="bordercolor" value="borderYellow" checked>
    <label for="radio7">border yellow</label>

    <input type="radio" id="radio8" name="bordercolor" value="borderBlue">
    <label for="radio8">border blue</label>

    <input type="radio" id="radio9" name="bordercolor" value="borderOrange">
    <label for="radio9">border orange</label> 
   
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

您可以稍微清理代码以删除代码重复。然后，您需要检查段元素上的现有类，以便从同一组中删除类。

我想出了这个：

document.addEventListener('DOMContentLoaded', function () {

    var radios = {
        color: [].slice.call(document.getElementsByName('color')),
        bordercolor: [].slice.call(document.getElementsByName('bordercolor')),
        size: [].slice.call(document.getElementsByName('size'))
    };
    var radioButtons = [].concat.call([], radios.color, radios.size, radios.bordercolor);
    var paragraph = document.querySelector('.folder');

    for (var i = 0; i < radioButtons.length; i++) {
        var elem = radioButtons[i];
        elem.addEventListener('change', function (e) {
            unsetGroup(this.name);
            paragraph.classList.add(this.value);
        }, false);
    }

    function unsetGroup(name) {
        radios[name].forEach(function(el) {
            paragraph.classList.remove(el.value);
        });
    }
});

演示： http://jsfiddle.net/c8f330ut/

答案 1 :(得分：1)

按下任何单选按钮时，设置＆＃34;段落＆＃34;到它的默认类（folder），然后遍历所有单选按钮，为被检查的那些添加适当的类：

document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.querySelectorAll('input[type="radio"]');

  for(var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

  function update() {
    var paragraph = document.querySelector('.folder');
    paragraph.className = 'folder';
    for(var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});

＆＃13;
＆＃13; 
document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.querySelectorAll('input[type="radio"]');
  
  for(var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

  function update() {
    var paragraph = document.querySelector('.folder');
    paragraph.className = 'folder';
    for(var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});
＆＃13; 
.folder {
  width: 100px;
  height: 60px;
  border: 5px solid;
  background: #111;
  transition: all 0.3s;
}
.radio-toolbar {
  display: block;
  float: left;
  padding: 20px;
  width: 33%;
  box-sizing: border-box;
}
.radio-toolbar input[type="radio"] {
  display: none;
}
.radio-toolbar label {
  display: block;
  width: 100%;
  float: left;
  background-color: #ddd;
  padding: 4px 11px;
  font-size: 16px;
  margin-bottom: 5px;
  cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked + label {
  background-color: lightgreen;
}
.black {
  background-color: #000;
}
.white {
  background-color: #fff;
}
.green {
  background-color: #00CC00;
}
.size100 {
  width: 100px;
}
.size200 {
  width: 200px;
}
.size300 {
  width: 300px;
}
.borderYellow {
  border-color: #FFFF33;
}
.borderBlue {
  border-color: #3333FF;
}
.borderOrange {
  border-color: #FF9933;
}
.size200 {
  width: 200px;
}
.size300 {
  width: 300px;
}
＆＃13; 
<div class="folder"></div>

<div class="radio-toolbar">
  <input type="radio" id="radio1" name="color" value="black" checked>
  <label for="radio1">black</label>

  <input type="radio" id="radio2" name="color" value="white">
  <label for="radio2">white</label>

  <input type="radio" id="radio3" name="color" value="green">
  <label for="radio3">green</label>
</div>


<div class="radio-toolbar">
  <input type="radio" id="radio4" name="size" value="size100" checked>
  <label for="radio4">size 10</label>

  <input type="radio" id="radio5" name="size" value="size200">
  <label for="radio5">size 20</label>

  <input type="radio" id="radio6" name="size" value="size300">
  <label for="radio6">size 30</label>
</div>


<div class="radio-toolbar">
  <input type="radio" id="radio7" name="bordercolor" value="borderYellow" checked>
  <label for="radio7">border yellow</label>

  <input type="radio" id="radio8" name="bordercolor" value="borderBlue">
  <label for="radio8">border blue</label>

  <input type="radio" id="radio9" name="bordercolor" value="borderOrange">
  <label for="radio9">border orange</label>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题