手动自制下拉列表框使用复选框

345 查看

昨天产品部让我做一个这样的效果图片描述
我上网查了好久，都没有满意的，代码太多，也不符合要求，只能自己做了，效果如下：
用到的图标

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表框含有复选框效果</title>
<style type="text/css">
.checkboxImg {
width: 80px;
height: 20px;
border: 1px solid #999999;
background: url(answerImg.png) no-repeat center right; /自己弄一张13px下拉列表框的图标/
}
.checkboxDiv {
width: 80px;
display: none;
border: 1px solid #999999;
border-top: none;

    }
    .determineCls {
        width: 76px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #999999;
        font-size: 12px;
        margin: 3px auto;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
    }
</style>

</head>
<body>
<div id="checkboxImg" class="checkboxImg">
</div>
<div id="checkboxDiv" class="checkboxDiv">
<input type="checkbox" name="checkboxValue" value="A">A<br>
<input type="checkbox" name="checkboxValue" value="B">B<br>
<input type="checkbox" name="checkboxValue" value="C">C<br>
<input type="checkbox" name="checkboxValue" value="D">D<br>
<input type="checkbox" name="checkboxValue" value="E">E<br>
<div id="determineDiv" class="determineCls">确定</div>
</div>

//复选框弹入弹出
$("#checkboxImg").click(function() {
    $("#checkboxDiv").toggle();
});

//复选框选中事件
$('input[name="checkboxValue"]').click(function(){
    /*if( $('input[name="checkboxValue"]').checked(true)){
        alert(1)
    }*/
    var chk_value =[];
    $('input[name="checkboxValue"]:checked').each(function(){
        chk_value.push($(this).val());
    });
    //alert(chk_value);
    $('#checkboxImg').html(chk_value)
});

</script>

</body>
</html>