轻松实现js弹框显示选项

先看看效果：

效果

-点击弹出弹框
-点击复选框，已选div中 显示已选中的选项
-再次点击取消选中状态，已选div中 显示的选中选项取消显示
-点击 已选 div中的 选项x图标，取消显示该选项 ，取消相应复选框选中状态​
-点击大类，小类取消选中状态，点击小类，选中大类取消选中状态
-最多3个选项可以被选中
-点击x图标关闭弹框
-点击确定按钮显示选择后的结果

代码块

html片段代码

  科室分类：
  
    
    
  
 


  
  
    
      

 
临床医学
 
辅助科室
 
其他
 

      
      
    

    
    
      
 
 
   
   内科
   
 
 @foreach($oLcyx1 as $key=>$val)
 
   
   {{$val->name}}
   
 
 @endforeach
 
  
 
 
   
   外科
   
 
 @foreach($oLcyx2 as $key=>$val)
 
   
   {{$val->name}}
   
 
 @endforeach
 
 
 
 
   
   其他
   
 
 @foreach($oLcyx3 as $key=>$val)
 
   
   {{$val->name}}
   
 
 @endforeach
  
  
      
     
    
      
 
   
 
 @foreach($oFzks as $key=>$val)
 
   
   {{$val->name}}
   
 
 @endforeach
  
      
       
    
      
 
   
 
 @foreach($oYygs as $key=>$val)
 
   
   {{$val->name}}
   
 
 @endforeach
  

       
    


    
      
 已选：
 
   
 
 
      
      
 
      
    


    最多3个选项
  

 

 js片段代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。