普通的select框，選擇的時候只能選單項。但是有時候項目需要，需要選擇兩項或者多項，最常用的設(shè)計就是模擬select下拉選擇的形式，效果圖如下：
我今天的方法不是用select實現(xiàn)的，而是模擬select的形式。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0; box-sizing:border-box}
/*單選-復(fù)選*/
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">
//定義一個空數(shù)組去接收value值
var arr = [];
var put1=document.getElementById("input-define");
var div1=document.getElementById("data");
//仿select的點擊事件
$("#selectbox").click(function(event){
var ev = event || window.event;
//阻止默認(rèn)事件及封裝
if (ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelable = true;
}
$("#selectbox ul").css("display","block");
});
$(window).click(function(){
$("#selectbox ul").css("display","none");
});
//監(jiān)聽checkbox的value值 改變則執(zhí)行下列操作
$("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;
});
//復(fù)選
$(function(){
$('.label-check').click(function(){ setupCheck(); });
});//點擊label-check時執(zhí)行以下事件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'); });
}//選中復(fù)選選項時給其父元素.label-check增加選中樣式
}
</script>
</body>
</html>
轉(zhuǎn)自 https://blog.csdn.net/qq_31635733/article/details/82500451
聯(lián)系客服
