所用到的知识点:
1、iconfont图标库的运用;
2、改变input的多选框默认的样式,所运用的小知识点利用label标签;
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/iconfont.css"> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <input id="noselect" type="checkbox" name="" style="display: none;"> <label for="noselect" class="iconfont icon-square"></label> <input id="noselect2" type="checkbox" name="" style="display: none;"> <label for="noselect2" class="iconfont icon-square"></label> <script type="text/javascript"> $(function(){ $('label').each(function() { $(this).click(function(){ if ($(this).hasClass('icon-square')) { $(this).removeClass('icon-square').addClass('icon-select2fill') }else{ $(this).removeClass('icon-select2fill').addClass('icon-square') } }) }) }) </script> </body> </html>
以上代码中运用到的图标都是利用iconfont图标库;其中iconfont.css我没用引入代码,如果想了解iconfont图标库的运用,请查看地址:http://www.cnblogs.com/myunYao/p/8820529.html
以下为效果图展示: