javascript - ul中的li只能单选,这个如何实现???求助,点击其他按钮其他国家不可选择-PHP中文网问答

javascript - ul中的li只能单选,这个如何实现???求助,点击其他按钮其他国家不可选择

黄舟 2017-04-11 11:12:47

[JavaScript讨论组]

829

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(4)

大家讲道理2017-04-11 11:14:47 4楼

假设li里面是button，每个button都有id

$(button).on('click', function () {
  if ( $.data('checkedButton') ) { // 已经点击过，第二次点击时
    if ( $.data('checkedButton') !== this.id ) // 第二次点击的不是高亮按钮时
      reuturn false;
    } else { // 第二次点击的是高亮按钮时
      $.removeData('checkedButton');
      $(button).prop('disable', false);
    }
  } else { // 没有点击过，第一次点击时
    $.data('checkedButton', this.id);
    $(this).siblings().prop('disable', true);
  }
})

赞 +0

添加回复

伊谢尔伦2017-04-11 11:14:47 3楼

没用js写。

        <style type="text/css">
            input{
                display: none;
            }
            label{
                border: 1px solid;
                display: inline-block;
                height : 50px;
                width : 100px;
                font: 30px/50px "微软雅黑";
                text-align:center;
            }
            input:checked+label{
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <input type="radio" name="country" id="usa" value="" />
        <label for="usa">美国</label>
        <input type="radio" name="country" id="china" value="" />
        <label for="china">中国</label>
        <input type="radio" name="country" id="spa" value="" />
        <label for="spa">西班牙</label>
        <input type="radio" name="country" id="other" value="" />
        <label for="other">其他</label>
    </body>

赞 +0

添加回复

黄舟2017-04-11 11:14:47 2楼

这就是一个数组循环选取的问题嘛：

var li=document.getElementsByTageName("li");//获取所有选项
for(var i=0,len=li.length;i<len;i++){//循环
    (function(i){
        li[i].onclick=function(){
           //dosomthing;
            alert(i);
        }
    })(i)；
}

赞 +0

添加回复

ringa_lee2017-04-11 11:14:47 1楼

//HTML:

     <ul id='select_ul'>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
     </ul>
        
//JS:
    var lis = Array.prototype.slice.call(document.getElementById('select_ul').getElementsByTagName('li'));
    var len = lis.length;
    function handle() {
        var activeLen = document.querySelectorAll('.active').length;
        if (this.classList.contains('active')) {
            this.classList.remove('active')
        } else {
            if (!activeLen) {
                this.classList.add('active')
            }else{
                lis.forEach(function(item){
                    item.classList.remove('active')
                })
                this.classList.add('active')
            }
        }
    }
    lis.forEach(function(item, i) {
        item.addEventListener('click', handle, false)
    })

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>