本章给大家带来用js实现下拉复选框效果(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
先看看效果：
下面我们看看代码：
HTML代码：
HTML
CSS
JavaScript
jQuery
PHP
MySQL
Java
C#
C++
Pyhton
css代码：div {
display: inline-block;
}
select {
min-width: 200px;
height: 25px;
border: 1px solid #000;
}
ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #000;
}
label {
display: block;
padding: 2px 10px;
white-space: nowrap;
}
ul li:hover {
background-color: #aabbcc;
}
JavaScript代码：/**
* [dropDownCk 下拉复选框]
* @param {[String]} boxId [父级元素id]
* @param {[String]} selectId [下拉选id]
* @param {[String]} hiddenId [隐藏区域id]
* @return {[Array]} [description]
*/
function dropDownCk(selectId,hiddenId) {
var boxId = "#" + boxId,
selectId = "#" + selectId,
hiddenId = "#" + hiddenId;
$(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域
$(this).hide();
});
$(selectId).click(function() { // 切换显示与隐藏
$(hiddenId).toggle();
});
var tagArr = []; // 接收复选字段数组
$(selectId).html("" + "请选择项目" + "");
$(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素
if ($(this).is(':checked')) {
tagArr.push($(this).parent().text());
$(selectId).html("" + tagArr.join(",") + "");
} else {
tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素
if (tagArr.length == 0) {
$(selectId).html("" + "请选择项目" + "");
} else {
$(selectId).html("" + tagArr.join(",") + "");
}
}
});
return tagArr;
}
var tag1 = dropDownCk("lang1","ck1");
var tag2 = dropDownCk("lang2","ck2")
注意：当遇到选项比较多时，可以定义一个数组插入到HTML中，实现下拉的选项，可以参考三级联动的写法：玩转javascript之三级联动实例。
