轻松实现js弹框显示选项

先看看效果：

效果

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

代码块

html片段代码

rush:xhtml;">

分类：

display: none;">

Box">

<div class="pop_sele_cont_box" >
<!-- 临床医学-S -->
  <div class="pop_sele"&gt;
    <!-- 内科-S -->
    <div class="sele_tit_block"&gt;
      <input class="sele_check" type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="4" parent="1"/&gt;
      <label class="sele_tit_txt"&gt;内科</label>
      <div class="clear"&gt;</div>
    </div>
    @foreach($oLcyx1 as $key=>$val)
    <div class="sele_block clearfix"&gt;
      <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/&gt;
      <label class="sele_txt"&gt;{{$val->name}}</label>
      <div class="clear"&gt;</div>
    </div>
    @endforeach
    <div class="clear"&gt;</div>
    <!-- 内科-E --> 
    <!-- 外科-S -->
    <div class="sele_tit_block"&gt;
      <input class="sele_check" type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="5" parent="1"/&gt;
      <label class="sele_tit_txt"&gt;外科</label>
      <div class="clear"&gt;</div>
    </div>
    @foreach($oLcyx2 as $key=>$val)
    <div class="sele_block clearfix"&gt;
      <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/&gt;
      <label class="sele_txt"&gt;{{$val->name}}</label>
      <div class="clear"&gt;</div>
    </div>
    @endforeach
    <div class="clear"&gt;</div>
    <!-- 外科-E -->
    <!-- 其他-S -->
    <div class="sele_tit_block"&gt;
      <input class="sele_check" type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="6" parent="1"/&gt;
      <label class="sele_tit_txt"&gt;其他</label>
      <div class="clear"&gt;</div>
    </div>
    @foreach($oLcyx3 as $key=>$val)
    <div class="sele_block clearfix"&gt;
      <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/&gt;
      <label class="sele_txt"&gt;{{$val->name}}</label>
      <div class="clear"&gt;</div>
    </div>
    @endforeach
    <div class="clear"&gt;</div> 
    <!-- 其他-E -->               
  </div>
<!-- 临床医学 -E --> 
<!-- 辅助科室-S -->
  <div class="pop_sele"&gt;
    <div class="sele_tit_block"&gt;
      <div class="clear"&gt;</div>
    </div>
    @foreach($oFzks as $key=>$val)
    <div class="sele_block clearfix"&gt;
      <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/&gt;
      <label class="sele_txt"&gt;{{$val->name}}</label>
      <div class="clear"&gt;</div>
    </div>
    @endforeach
    <div class="clear"&gt;</div> 
  </div>
<!-- 辅助科室-E -->   
<!-- 医药公司-S -->
  <div class="pop_sele"&gt;
    <div class="sele_tit_block"&gt;
      <div class="clear"&gt;</div>
    </div>
    @foreach($oYygs as $key=>$val)
    <div class="sele_block clearfix"&gt;
      <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/&gt;
      <label class="sele_txt"&gt;{{$val->name}}</label>
      <div class="clear"&gt;</div>
    </div>
    @endforeach
    <div class="clear"&gt;</div> 
  </div> 
<!-- 医药公司-E -->   
</div>

<div class="pop_btm_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;
  <div class="sele_department_block"&gt;
    <div class="left_block"&gt;已选：</div>
    <div class="right_block"&gt;
      <div class="clear"&gt;</div>
    </div>
    <div class="clear"&gt;</div>
  </div>
  <div class="pop_btn_block"&gt;
    <input class="pop_btn" type="button" value="确定" onClick="checkReturn();"/&gt;
  </div>
</div>

<div class="pop_txt_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" id="msg"&gt;最多3个选项</div>

js片段代码

rush:js;">

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