摘要
本文旨在解决在使用 JavaScript 实现的可搜索下拉复选框中，“全选”功能在搜索过滤后仍然选择所有选项的问题。通过修改 JavaScript 代码，使“全选”功能仅作用于当前显示的复选框，提升用户体验。主要涉及 CSS 类的使用和 JavaScript 中 DOM 元素的选择。
正文
在使用 JavaScript 构建具有搜索功能的下拉复选框时，一个常见的需求是实现“全选”功能，即点击一个复选框可以选择或取消选择所有选项。然而，当用户使用搜索功能过滤选项后，“全选”功能通常会选择所有原始选项，而不是仅仅选择当前显示的选项。本文将介绍如何修改 JavaScript 代码，使“全选”功能仅作用于当前显示的复选框。
1. 使用 CSS 类控制显示状态
为了更方便地控制元素的显示和隐藏，建议使用 CSS 类，而不是直接修改 style 属性。修改 filterFunction 函数，使用 classList.toggle 方法来添加或移除 hidden 类，从而控制选项的显示状态。
function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("getMerchant"); a = div.getElementsByTagName("li"); for (i = 1; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; a[i].classList.toggle('hidden', txtValue.toUpperCase().indexOf(filter) === -1); }}
在上面的代码中，a[i].classList.toggle(‘hidden’, txtValue.toUpperCase().indexOf(filter) === -1); 这行代码会根据搜索结果，动态地给 li 元素添加或移除 hidden 类。如果 txtValue 中不包含 filter，则添加 hidden 类，隐藏该选项；否则，移除 hidden 类，显示该选项。
注意: 确保你的 CSS 中定义了 .hidden 类，例如：
.hidden { display: none;}
2. 修改“全选”功能
修改 selectAll 函数，使其只选择当前显示的复选框。可以使用 querySelectorAll 方法选择所有未隐藏的复选框。
function selectAll() { var ele = document.querySelectorAll("li:not(.hidden) > div > input[type=checkbox]"); var checked = $('#checkbox-item-14').is(':checked'); for (var i = 0; i < ele.length; i++) { ele[i].checked = checked; }}
在上面的代码中，document.querySelectorAll(“li:not(.hidden) > div > input[type=checkbox]”) 这行代码会选择所有不在 hidden 类中的 li 元素下的 div 元素下的 input[type=checkbox] 元素。这样，selectAll 函数只会作用于当前显示的复选框。
3. 完整代码示例
下面是完整的 HTML 和 JavaScript 代码示例：
function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); console.log(filter); div = document.getElementById("getMerchant"); a = div.getElementsByTagName("li"); for (i = 1; i div > input[type=checkbox]"); var checked = $('#checkbox-item-14').is(':checked'); for (var i = 0; i < ele.length; i++) { ele[i].checked = checked; } }
4. 注意事项
确保引入了 jQuery 库，因为代码中使用了 $(‘#checkbox-item-14’).is(‘:checked’)。根据实际情况修改 HTML 结构和 CSS 类名。可以根据需要优化搜索算法，例如使用更高效的字符串匹配方法。
5. 总结
通过使用 CSS 类控制元素的显示状态，并修改 JavaScript 代码，可以实现可搜索下拉复选框的“全选”功能，使其仅作用于当前显示的选项。这种方法可以提升用户体验，使下拉复选框更加易于使用。
以上就是实现可搜索下拉复选框的“全选”功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528238.html
微信扫一扫 
支付宝扫一扫 
