如何使用 JavaScript 在 Select Option 中使用 Checkbox ？

给定一个 HTML 文档，任务是使用 JavaScript 添加 Checkbox inside select 选项。

方法：

• 创建一个显示“选择选项”的选择元素，并创建一个包含复选框和使用 CSS 的样式的 div。
• 添加当用户单击包含 select 元素的 div 时调用的 javaScript 功能。

句法：

function showCheckboxes() {
    var checkboxes = document.getElementById("checkBoxes");

    if (show) {
        checkboxes.style.display = "block";
        show = false;
    } else {
        checkboxes.style.display = "none";
        show = true;
    }
}

完整代码：

  

    
        How to use Checkbox inside Select 
        Option using JavaScript?
    
  
    
        h1 {
            color: green;
        }
  
        .multipleSelection {
            width: 300px;
            background-color: #BCC2C1;
        }
  
        .selectBox {
            position: relative;
        }
  
        .selectBox select {
            width: 100%;
            font-weight: bold;
        }
  
        .overSelect {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
  
        #checkBoxes {
            display: none;
            border: 1px #8DF5E4 solid;
        }
  
        #checkBoxes label {
            display: block;
        }
  
        #checkBoxes label:hover {
            background-color: #4F615E;
        }
    

  

    GEEKSFORGEEKS
  
    Use CheckBox inside Select Option
  
    
        
            
                
                    Select options
                
                
            
  
            
                
                    
                    checkBox1
                
                  
                
                    
                    checkBox2
                
                
                    
                    checkBox3
                
                
                    
                    checkBox4
                
            
        
    
  
    
        var show = true;
  
        function showCheckboxes() {
            var checkboxes = 
                document.getElementById("checkBoxes");
  
            if (show) {
                checkboxes.style.display = "block";
                show = false;
            } else {
                checkboxes.style.display = "none";
                show = true;
            }
        }
    

  

输出：