select中如何添加checkbox?

最新推荐文章于 2022-10-17 10:38:54 发布

大眼萌

最新推荐文章于 2022-10-17 10:38:54 发布

阅读量7.3k

点赞数 3

分类专栏： WEB前端 html CSS

本文链接：https://blog.csdn.net/qq_31635733/article/details/82500451

版权

CSS 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

WEB前端

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

普通的select框，选择的时候只能选单项。但是有时候项目需要，需要选择两项或者多项，最常用的设计就是模拟select下拉选择的形式，效果图如下：

我今天的方法不是用select实现的，而是模拟select的形式。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0; box-sizing:border-box}
/*单选-复选*/
label{ cursor:pointer;line-height:15px; }
.label-check{ background:url(images/check.png) no-repeat; }
.check-checked{ background:url(images/check-checked.png) no-repeat }
.label-check input{ opacity:0; filter:alpha(opacity=0);}
.title{
  width: 300px;
  height: 30px;
  line-height:30px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  padding:0px 40px 0px 10px;
  background:#fff; 
  background:url(images/icon_select_bg.png) no-repeat right;
  position:absolute;
  top:0px;
  left:0px;
}
.input-define{ width:250px; height:22px; line-height:22px; border:none; outline:none;}
#selectbox{
  width: 300px;
  height: 30px;
  line-height:30px;
  position: relative;
  margin:0px auto;
}
#selectbox ul {
  width: 300px;
  background: #fff;
  position: absolute;
  top: 40px;
  left: 0px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  display: none;
}
#selectbox ul li {
  list-style: none;
  height:25px; 
  line-height:25px;
  padding:0px 10px;
}
#selectbox ul li:hover{ background:#f3f3f3; }
#data { display:none; }
</style>
</head>
<body>
<div id="selectbox">
   <div class="title">
      <input type="text" class="input-define" id="input-define"  placeholder="请选择"/>
   </div>
   <ul>
      <li>
          <label for="checkbox-01" class="label-check">
             <input type="checkbox" id="checkbox-01" name="checkbox"  value="人流量热力图"/>
          </label>
          人流量热力图
      </li>
      <li>
          <label for="checkbox-02" class="label-check">
              <input type="checkbox" id="checkbox-02" name="checkbox"  value="流量热力图"/>
          </label>
          流量热力图
      </li>
      <li>
          <label for="checkbox-03" class="label-check">
               <input type="checkbox" id="checkbox-03" name="checkbox"  value="景点热度"/>
          </label>
          景点热度
       </li>
       <li>
           <label for="checkbox-04" class="label-check">
               <input type="checkbox" id="checkbox-04" name="checkbox"  value="mr栅格"/>
           </label>
           mr栅格
       </li>
       <li>
            <label for="checkbox-05" class="label-check">
               <input type="checkbox" id="checkbox-05" name="checkbox"  value="热门消费点"/>
            </label>
            热门消费点
       </li>
       <li>
            <label for="checkbox-06" class="label-check">
                <input type="checkbox" id="checkbox-06" name="checkbox"  value="dpi栅格"/>
            </label>
            dpi栅格
       </li>       
    </ul>
    <span id="data"></span>
 </div>
 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//定义一个空数组去接收value值
var arr = []; 
var put1=document.getElementById("input-define");
var div1=document.getElementById("data");
//仿select的点击事件
$("#selectbox").click(function(event){
  var ev = event || window.event;
  //阻止默认事件及封装
  if (ev.stopPropagation) {
     ev.stopPropagation();
   }else{
   ev.cancelable = true;
  }
  $("#selectbox ul").css("display","block");
 });
 
 $(window).click(function(){
   $("#selectbox ul").css("display","none");
 });
 //监听checkbox的value值 改变则执行下列操作
 $("input").change(function(){
    if ($(this).prop("checked")) {
      arr.push($(this).val()+",");
      console.log(arr);
    }else{
      arr.shift($(this).val()+",");
    }
 $("#data").html(arr);
	put1.value=div1.innerText;
 });
 
 //复选
 $(function(){
     $('.label-check').click(function(){ setupCheck(); });
     });//点击label-check时执行以下事件setupCheck()
 function setupCheck(){
     if($('.label-check input').length) {
     $('.label-check').each(function(){ $(this).removeClass('check-checked'); });//移除.label-check的选中样式
     $('.label-check input:checked').each(function(){ $(this).parent('label').addClass('check-checked'); }); 
     }//选中复选选项时给其父元素.label-check增加选中样式
 }
 
</script>
 </body>
</html>

大眼萌

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
select中如何添加checkbox?

普通的select框，选择的时候只能选单项。但是有时候项目需要，需要选择两项或者多项，最常用的设计就是模拟select下拉选择的形式，效果图如下：我今天的方法不是用select实现的，而是模拟select的形式。代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;t...
复制链接

扫一扫