问题描述
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期间它没有获取值,有人可以建议我解决这个问题
解决方法
我认为您正在寻找嵌套的复选框,提供的图像也建议相同。
这是代码片段,简单地添加了 <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>
既然你在问题中显然没有提到,我认为这会是你要找的。如果需要任何帮助,请在评论中提及。