js实现复选框的漂亮做法

 

效果

 

 

上代码 ：ul中的两个li内容是相同的，就是你要展示的列表记录

样式

  .li-l .select-no{display: none; padding-left: 5px}
 .select .li-l .select-yes{display: block; padding-left: 5px}

Html 

<ul class="sp-list" style="width: 100%">  
    <li class="li" >
      <div class="li-l" style="display: flex;align-items: center;width: 100%;">
         <img class="icon select-no"  src="/images/djimart//icon_select1_ot.png">
           <img class="icon select-yes"  src="/images/djimart//icon_select1_ov.png">
      </div>
    </li>
<li class="li" >
 <div class="li-l" style="display: flex;align-items: center;width: 100%;"> 
   <img class="icon select-no" src="/images/djimart//icon_select1_ot.png"> 
   <img class="icon select-yes" src="/images/djimart//icon_select1_ov.png"> 
</div> </li>
</ul>

 

谷歌浏览器控制台看他们结构是这样，这样看更加直观

 

借助jquery来编写js

  /****判断选中多少个产品****/
  function IsSelectProducts(){

      $.each($(".sp-list li"),function (i) {
          var obj=$(this);
         
              if($(this).attr("class").indexOf("select")>-1){
         
                 //说明选中
              }else {
                  //没被选中
      }
          });
      });
      
  }

 

如果是嵌套处理，那么只需要循环嵌套即可