jQuery 带输入的过滤器（包括/在复选框内）

jQuery filter with imputs (include / inside checkbox)

我想问一下有没有人知道如何解决我的问题。过滤适用于每个其他（我想使用不区分大小写），但在搜索“食物”后复选框不会出现。我需要创建一个带有复选框的类别列表。如果你搜索一个类别，你可以立即勾选复选框

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>

<h2>Filter</h2>
<!--Type something in the input field to search for a specific text inside the div element with id="myDIV" -->
<input id="myInput" type="text" placeholder="Search..">

<div id="myDIV">
  <p>dog</p>
  <div>master20</div>
  <button>Button</button>
  <p>Welcome5</p>
  <label class="important_class_for_me">Food
    <input type="checkbox">
    <span class="my_custom_checkmark"></span>
  </label>
</div>
  
</body>
</html>

问题出在字符 *、选择器 $("#myDIV *") 上。通过指定此字符，您将所有 children 称为 parent - child - child - child ....

您只需引用 parent #myDIV 的第一个 child。将 * 替换为 >。像这样：

$("#myDIV >").filter(function() { ... }


$(document).ready(function () {
    $("#myInput").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#myDIV >").filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Filter</h2>
<!--Type something in the input field to search for a specific text inside the div element with id="myDIV" -->
<input id="myInput" type="text" placeholder="Search.." />

<div id="myDIV">
    <p>dog</p>
    <div>master20</div>
    <button>Button</button>
    <p>Welcome5</p>
    <label class="important_class_for_me">
        Food
        <input type="checkbox" />
        <span class="my_custom_checkmark"></span>
    </label>
</div>

您将所有元素都隐藏在 myDIV 中，而不仅仅是令人生畏的 child。

碰巧 :

<input type="checkbox">
<span class="my_custom_checkmark"></span>

两者都是 child 并且它们没有 .text() 所以它们会切换。

相反，只需通过将 $("#myDIV *") 更改为 $("#myDIV > *")

来通过恐吓 child 进行过滤