2 yinxiaopei yinxiaopei 于 2015.05.26 22:36 提问

在html中,多个li怎么控制选择样式,多选。或者怎么实现自定义的checkbox。有布局的页面。

图片说明
如图,一个图片对应的是一行或者两行文字,这个怎么布局比较好呢?我目前是用的li。如果用li怎么实现多选呢?求解求思路。谢谢。

2个回答

danielinbiti
danielinbiti   Ds   Rxr 2015.05.26 23:02
已采纳

用什么都可以,可以用样式变化模拟选中,如果要有前面的框,那就自己加背景图,设置要样式里

 <html> 
<head> 
    <script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
    <style>
        ul li{
             list-style-type:none;
        }
        .on{
            background-color:red;
        }
        .off{
            background-color:none;
        }
    </style>
</head> 
<script>

</script>
<body> 
    <ul id="meslib">
         <li>1111111</li>
         <li>2222</li>
         <li>3333</li>
         <li>444444444</li>
    </ul>
<input type='button' value='获取选中的li' onclick="getSelect()"></input>
<script>
    function getSelect(){
         alert($('.on').length);
    }
  $('li').click(function(){
     $(this).toggleClass('on');
  });
</script>
</body> 
</html> 
showbo
showbo   Ds   Rxr 2015.05.27 11:07

切换下样式就好了。看你的截图明显就是更改右上角的三角颜色而已

Csdn user default icon
上传中...
上传图片
插入图片