javascript - 尝试使用多选进行下拉时出错？

Question

var expanded = false;

function showCheckboxes() {
  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: 30px 0px 0px 0px;
    background-color: #ffffff;
}
  .form-filter-shade{
    padding: 16px 0px 9px 20px;
    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;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

<div class="gradesub-filter">
    <div class="form-filter-shade">Gradecheck</div>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
  </div>

我正在尝试使用复选框进行“多选下拉”，如下图所示。现在代码的问题是无法从下拉列表中选择列表。

我认为问题出在js代码中，在onclick期间它没有获取值，有人可以建议我解决这个问题吗

标签： javascripthtmlcssvue.jsng-dropdown-multiselect

Answer 1

我认为您正在寻找嵌套复选框，提供的图像也建议相同。

这是代码片段，只是添加了复选框对齐<ul>的<li>标签，并使用了一些 JavaScript 查询选择器来实现复选框功能。

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;

function showCheckboxes() {
  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: 30px 0px 0px 0px;
    background-color: #ffffff;
}
  .form-filter-shade{
    padding: 16px 0px 9px 20px;
    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;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

ul{
    margin-left: -25px;    
}

li{
    list-style: none;
}

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

由于您显然没有在问题中提到，我认为这将是您要找的。如果需要任何帮助，请在评论中提及。