JS怎么实现类似单选功能的效果,选中一个,其他的自动取消

JS如何实现类似单选功能的效果,选中一个,其他的自动取消

var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
li[i].onclick = function() {
    if (this.className) {
this.className = '';
    } else {
this.className = 'selected';
    }
}
}

现在的状况是,点击任意一个li,如果没有设置类别选择器,就给他加上类别选择器,如果有了就取消

我想实现的是,选中一个,增加了 selected 后,选中另一个,那么之前选中的自动取消,去掉 selected 
------解决思路----------------------
遍历兄弟元素 classname置为空

var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
li[i].onclick = function() {
for(var j = 0; j < li.length; j++)
{
if(li[j]!=this) li[j].classname=''; 
}
            if (this.className) {
            this.className = '';
            } else {
            this.className = 'selected';
            }
        }
}

------解决思路----------------------

 var li = document.getElementsByTagName('li');
            for (var i = 0; i < li.length; i++) {
                li[i].onclick = function () {
                    var li = document.getElementsByTagName('li');
                    for (var i = 0; i < li.length; i++) {
                        if (li('li')[i] != this)
                            li('li')[i].className = '';
                    }
                    if (this.className) {
                        this.className = '';
                    } else {
                        this.className = 'selected';
                    }
                }
            }


重新贴一次。。。JS怎么实现类似单选功能的效果,选中一个,其他的自动取消

要是使用jq 就简单点了。
------解决思路----------------------

var li = document.getElementsByTagName('li');
var tempLi = {};
for (var i = 0; i < li.length; i++) {
li[i].onclick = function() {
this.className = 'selected';
tempLi.className = '';
tempLi = this;
}
}