JavaScript单选功能的实现方式

SJY发表于:2018年04月14日 10:54 • 阅读:

HTML有自带的单选按钮 <input type="radio"> 但他一旦选中就无法取消,而很多情况下都需要可取消的单选功能,比如复选框 <input type="checkbox"> 有时候我们希望他只有单选的功能该怎么实现呢?又或者是自定义的列表,如何实现单选功能呢?
做个简单的例子,HTML代码如下

<style>
li{
list-style:none;
width:500px;
border:1px dashed #ccc;
}
li.selected{
background:#ffc;
}
</style>
<ul>
<li>num 1</li>
<li>num 2</li>
<li>num 3</li>
</ul


最高效的方式是,点击某个元素,然后记录它,当点击下一个元素时,把上一个记录的元素取消
JavaScript代码

var li = document.getElementsByTagName('li');
var tempLi = {};//建立对象 tempLi
for (var i = 0; i < li.length; i++) {
    li[i].onclick = function() {
        this.className = 'selected';//本次点击的元素设置类别 selected
        tempLi.className = '';//第一次循环tempLi为空对象,第二次循环,tempLi为上一次点击的li对象,把上次点击的对象className赋值空
        tempLi = this;//把本次的li对象,赋给tempLi
    }
}

或者用笨一点的办法,每次点击都遍历兄弟元素,把点击过的元素取消掉

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


 

欢迎转载,但请保留原文地址 http://www.sjyhome.com/javascript/1365.html

回复(0)