js实现下拉复选框效果（代码实例）

本章给大家带来用js实现下拉复选框效果（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

先看看效果：

下面我们看看代码：

HTML代码：

唱鸭

音乐创作全流程的AI自动作曲工具，集 AI 辅助作词、AI 自动作曲、编曲、混音于一体

下载

        
        

            

                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之三级联动实例。