数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 JavaScript 中使用复选框在选择选项内？
有时，我们需要在选择选项内使用复选框。我们可以通过在选择选项中引入复选框来允许用户选择多个选项。但是，如果我们对<select>标签使用multiple属性，它允许我们通过按“ctrl + 左键单击”来选择它们，但这是一种糟糕的用户体验。因此，我们可以在<select>菜单中引入复选框以改善用户体验。
在这里，我们将使用 JQuery 和 JavaScript 来管理<select>菜单中已选中复选框的值。
创建自定义选择菜单
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 变量，并将其初始化为 true 布尔值。我们将根据 showCheckBoxes 变量显示自定义下拉菜单的选项。
步骤 5 − 每当用户单击下拉 div 元素时，根据 showCheckBoxes 变量的值更改选项 div 的显示。
步骤 6 − 现在，定义一个 getOptions() 函数。在 getOptions() 函数中，访问所有选中的复选框，并使用 for 循环遍历 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 创建自定义选择菜单。此外，用户可以使用 Bootstrap 等一些 CSS 库来创建带有复选框的选择菜单。
8K+ 次浏览
