可搜索复选框全选实现方法详解

下载万磁搜索绿色版

想要在可搜索下拉复选框中实现更精准的“全选”功能吗？本文针对使用 JavaScript 构建的下拉复选框，聚焦解决搜索过滤后“全选”功能失效的问题。传统“全选”会选择所有选项，而本文将介绍如何优化代码，**让“全选”仅作用于当前显示的选项**，显著提升用户体验。文章将详细讲解如何利用 CSS 类控制选项的显示状态，并修改 JavaScript 代码，精确选择未隐藏的复选框。通过本文，你将掌握实现**可搜索下拉复选框精准“全选”功能**的关键技巧，打造更智能、更易用的用户界面。提供完整代码示例，助力快速实现！

摘要

本文旨在解决在使用 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 代码示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="dropdownSearch" class="bg-white rounded-lg shadow w-60" style="z-index: 999;">
  <div class="p-3">
    <label for="input-group-search" class="sr-only">Search</label>
    <div class="relative">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
      </div>
      &lt;input type=&quot;text&quot; id=&quot;myInput&quot; onkeyup=&quot;filterFunction()&quot; class=&quot;bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 &quot; placeholder=&quot;Search user&quot;&gt;
    </div>
  </div>
  <ul id="getMerchant" class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
    <li>
      <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
        &lt;input id=&quot;checkbox-item-14&quot; onchange=&quot;selectAll()&quot; type=&quot;checkbox&quot; class=&quot;w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500&quot;&gt;
        <label for="checkbox-item-14" id="select_all" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Select All</label>
      </div>
    </li>
    <li>
      <div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
        &lt;input id=&quot;merchant&quot; name=&quot;merchant[]&quot; type=&quot;checkbox&quot; value=&quot;foo&quot; class=&quot;w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 &quot;&gt;
        <label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">foo</label>
      </div>
    </li>
    <li>
      <div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
        &lt;input id=&quot;merchant&quot; name=&quot;merchant[]&quot; type=&quot;checkbox&quot; value=&quot;bar&quot; class=&quot;w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 &quot;&gt;
        <label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">bar</label>
      </div>
    </li>
    <li>
      <div id="myDropdown" class="flex items-center p-2 rounded hover:bg-gray-100 ">
        &lt;input id=&quot;merchant&quot; name=&quot;merchant[]&quot; type=&quot;checkbox&quot; value=&quot;baz&quot; class=&quot;w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 &quot;&gt;
        <label for="merchant-checkbox" id="merchant_name" class="w-full ml-2 text-sm font-medium text-gray-900 rounded ">baz</label>
      </div>
    </li>
  </ul>
</div>

<script>
    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 < a.length; i++) {
            txtValue = a[i].textContent || a[i].innerText;
            a[i].classList.toggle('hidden', txtValue.toUpperCase().indexOf(filter) === -1);
        }
    }

    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;
        }
    }
</script>

4. 注意事项

• 确保引入了 jQuery 库，因为代码中使用了 $('#checkbox-item-14').is(':checked')。
• 根据实际情况修改 HTML 结构和 CSS 类名。
• 可以根据需要优化搜索算法，例如使用更高效的字符串匹配方法。

5. 总结

通过使用 CSS 类控制元素的显示状态，并修改 JavaScript 代码，可以实现可搜索下拉复选框的“全选”功能，使其仅作用于当前显示的选项。这种方法可以提升用户体验，使下拉复选框更加易于使用。

理论要掌握，实操不能落！以上关于《可搜索复选框全选实现方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！