JavaScript 如何在选择选项中使用复选框 有时，我们需要在选择选项中使用复选框。我们可以通过在选择选项中引入复选框来让用户选择多个选项。然而，如果我们在标签中使用多个属性，它允许我们通过按下 “ctrl + left click “来选择它们，但这是一种糟糕的用户体验。因此，我们可以在<选择>菜单中引入复选框来改善用户体验。 这里，我们将使用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，来创建一个带有复选框的选择菜单。 上一篇 FabricJS 如何用Polyline类画一个正方形 下一篇 Java ConcurrentSkipListMap size()方法及示例
极客教程