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

Question

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

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

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

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

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

Answer 1

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

我想出了这个：

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/