极客教程JavaScript 如何在选择选项中使用复选框
有时，我们需要在选择选项中使用复选框。我们可以通过在选择选项中引入复选框来让用户选择多个选项。然而，如果我们在
这里，我们将使用JQuery和JavaScript来管理<选择>菜单中的复选框的值。
创建一个自定义的选择菜单
HTML的<select>元素不允许我们将复选框作为一个选项。因此，我们可以使用HTML <div>元素创建一个自定义的下拉菜单，并添加复选框作为其选项。
语法
用户可以按照下面的语法，使用JavaScript来管理自定义下拉菜单的复选框。
function showOptions() {
if (showCheckBoxes) {
// show options div
showCheckBoxes = false;
} else {
// hide options div
showCheckBoxes = true;
}
}
function getOptions() {
// selectedOptions is an array containing all checked checkboxes
var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
}
在上面的语法中，我们根据showCheckBoxes变量的值来显示自定义下拉菜单的选项。同时，我们可以通过selectedOptions数组的迭代来逐一获得所有选中的复选框。
操作步骤
- 第1步 ：创建一个包含菜单文本的div。
-
第2步 - 现在，使用自定义HTML，并使用复选框输入类型制作选项。
-
第 3步 ：在div元素上添加onClick事件。当用户点击该div时，它应该调用showOptions()菜单。
-
第4步 在JavaScript中，声明showCheckBoxes变量，并以真布尔值初始化它。我们将根据showCheckBoxes变量来显示自定义下拉菜单的选项。
-
第5步 ‒ 每当用户点击下拉 div 元素时，根据 showCheckBoxes 变量的值来改变选项 div 的显示。
-
第6步 现在，定义一个getOptions()函数。在getOptions()函数中，通过使用for-loop遍历selectedOptions数组，访问所有选中的复选框并打印所有选中复选框的值。
例子1
在下面的例子中，我们已经创建了自定义的选择菜单，正如上面的算法所解释的。用户可以通过选中多个复选框来选择多个选项。
同时，当用户点击获取选中的复选框按钮时，会调用getOptions()函数并打印出所有选中的复选框的值，通过这样的方式，我们可以得到选择菜单中所有选中的选项。
<html>
<head>
<style>
.dropdown {
width: 12rem;
height: 1.5rem;
font-size: 1.3rem;
padding: 0.6 0.5rem;
background-color: aqua;
cursor: pointer;
border-radius: 10px;
border: 2px solid yellow;
}
#options {
margin: 0.5rem 0;
width: 12rem;
background-color: lightgrey;
display: none;
flex-direction: column;
border-radius: 12px;
}
label {
padding: 0.2rem;
}
label:hover {
background-color: aqua;
}
button {
font-size: 1rem;
border-radius: 10px;
padding: 0.5rem;
background-color: yellow;
border: 2px solid green;
margin: 1rem 0;
}
</style>
</head>
<body>
<h2>Creating the custom dropdown menu to use <i>Checkboxes</i> as an option.
</h2>
<div class = "dropdown" onclick = "showOptions()">
show all options
</div>
<div id = "options">
<label for = "one">
<input type = "checkbox" id = "one" value = "First Option" />
First Option
</label>
<label for = "two">
<input type = "checkbox" id = "two" value = "Second Option" />
Second Option
</label>
<label for = "three">
<input type = "checkbox" id = "three" value = "Third Option" />
Third Option
</label>
<label for = "four">
<input type = "checkbox" id = "four" value = "Fourth Option" />
Fourth Option
</label>
<label for = "five">
<input type = "checkbox" id = "five" value = "Fifth Option" />
Fifth Option
</label>
</div>
<div id = "output"> </div>
<button onclick = "getOptions()"> Get all Selected Checkboxes </button>
<script>
let output = document.getElementById('output');
var showCheckBoxes = true;
function showOptions() {
var options =
document.getElementById("options");
if (showCheckBoxes) {
options.style.display = "flex";
showCheckBoxes = !showCheckBoxes;
} else {
options.style.display = "none";
showCheckBoxes = !showCheckBoxes;
}
}
function getOptions() {
var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
output.innerHTML = "The selected options are given below. <br/>";
for (var i = 0; i < selectedOptions.length; i++) {
output.innerHTML += selectedOptions[i].value + " , ";
console.log(selectedOptions[i])
}
}
</script>
</body>
</html>
在本教程中，用户学会了使用html、CSS和JavaScript创建一个自定义的选择菜单。此外，用户还可以使用一些CSS库，如Bootstrap，来创建一个带有复选框的选择菜单。