Error When Trying To Work On Drop Down With Multi Select?

I am trying to do 'Drop-down with multi select' with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown. I am th

Solution 1:

I think you are looking for nested Checkbox, Provided Image also suggest the same.

Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.

var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");

for(var i = 0; i < subOptions.length; i++ ){
    subOptions[i].onclick = function(){
        var checkedCount = document.querySelectorAll('input.sub:checked').length;
        checkAll.checked = checkedCount > 0;
        checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
    }
}

checkAll.onclick = function() {
  for(var i=0; i<subOptions.length; i++) {
    subOptions[i].checked = this.checked;
  }
}


var expanded = false;

functionshowCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

.gradesub-filter{
    width: 299px;
    height: 335px;
    margin: 30px0px0px0px;
    background-color: #ffffff;
}
  .form-filter-shade{
    padding: 16px0px9px20px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 2px solid #F0F0F0;
  }
  
  
.multiselect {
  width: 200px;
}

.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#dadada solid;
}

#checkboxeslabel {
  display: block;
}

#checkboxeslabel:hover {
  background-color: #1e90ff;
}

ul{
    margin-left: -25px;    
}

li{
    list-style: none;
}

<divclass="gradesub-filter"><divclass="form-filter-shade">Gradecheck</div><divclass="multiselect"><divclass="selectBox"onclick="showCheckboxes()"><select><option>Select an option</option></select><divclass="overSelect"></div></div><divid="checkboxes"><ul><li><labelfor="one"><inputtype="checkbox"id="one" />First checkbox</label><ul><li><labelfor="sub-one"><inputclass='sub'type="checkbox"id="sub-one" />Sub One checkbox</label></li><li><labelfor="sub-two"><inputclass='sub'type="checkbox"id="sub-two" />Sub Two checkbox</label></li><li><labelfor="sub-three"><inputclass='sub'type="checkbox"id="sub-three" />Sub Three checkbox</label></li></ul></li><li><labelfor="two"><inputtype="checkbox"id="two" />Second checkbox</label></li><li><labelfor="three"><inputtype="checkbox"id="three" />Third checkbox</label></li></ul></div></div></div>

Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.