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

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

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

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

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