无法使用 jquery 过滤复选框值答案

【问题标题】：Not able to filter Checkbox value using jquery无法使用 jquery 过滤复选框值
【发布时间】：2021-02-03 14:59:25
【问题描述】：

我有近 10 个带值的复选框。

我想根据复选框的值过滤复选框，但目前我无法

我无法更改 HTML 代码，但我不知道为什么它没有过滤复选框

(function($) {
  $(document).ready(function() {
    // Options search field
    $('#options').before(
      '<input id="search" style="display: inline; width:180px;" type="text" />' +
      '<span><a href="" onclick="return false;" id="search-clear">X</a></span>'
    );
    $('#search').keyup(function() {
      var valThis = $(this).val().toLowerCase();
      $('input[type=checkbox]').each(function() {
        //use checkbox val
        var text = $(this).val().toLowerCase();
        //closest to hide lis
        (text.indexOf(valThis) > -1 ) ? $(this).closest('li').show(): $(this).closest('li').hide();
      });
    });
    // Search clear button
    $("#search-clear").click(function() {
      $("#search").val("");
      $('input[type=checkbox]').each(function() {
        $(this).closest('li').show();
      });
    });
  });
})(jQuery);

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <div id="options">
      <div class="col s12  ">

        <label>Server</label>

        <div id="id_form-0-server">
          <ul>
            <li class="">
              <label>
                <input type="checkbox" name="form-0-server" value="ABC" id="id_form-0-server_0"> 
                <span>ABC-1-2</span>
              </label>
            </li>
            <li class="">
              <label>
                <input type="checkbox" name="form-0-server" value="EFD" id="id_form-0-server_1">
                <span>EFD-1-3</span>
              </label>
            </li>
            <li class="">
              <label>
                <input type="checkbox" name="form-0-server" value="KIS" id="id_form-0-server_2">
                <span>KIS-1-46</span>
              </label>
            </li>
            <li class="">
              <label>
                <input type="checkbox" name="form-0-server" value="PNJS" id="id_form-0-server_3">
                <span>PNJS-1</span>
              </label>
            </li>
            <li class="">
              <label>
                <input type="checkbox" name="form-0-server" value="PJSGRA" id="id_form-0-server_4">
                <span>PJSGRA-1-10</span>
              </label>
            </li>
            <li class="">
              <label>
                <input type="checkbox" name="form-0-server" value="KLSCV" id="id_form-0-server_5">
                <span>KLSCV-1</span>
              </label>
            </li>
          </ul>
        </div>
      </div>

编辑：

根据 Swati 的说明编辑了代码，但遇到了另一个问题，如果我必须使用跨度值而不是复选框属性值来过滤表怎么办？就像我希望过滤器根据 UI 中显示的值而不是复选框属性值来执行

【问题讨论】：

标签： html jquery filter

【解决方案1】：

尝试使用过滤器

$(function() {
  const $lis = $("#id_form-0-server li");
  const showAll = () => $lis.show();

  // Options search field
  $('#options').before(
    '<input id="search" style="display: inline; width:180px;" type="text" autocomplete="off" />' +
    ' <span><a href="#" id="search-clear">X</a></span>'
  );

  $('#search').on("input", function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis.trim() === "") {
      showAll()
      return
    }
    showAll();
    $lis.filter(function() {
      return !$(this).find('span').text().toLowerCase().includes(valThis)
    }).hide();
  });
  // Search clear button
  $("#search-clear").on("click", function(e) {
    e.preventDefault();
    $("#search").val("");
    showAll()
  })
});

a { text-decoration:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="options">
  <div class="col s12  ">

    <label>Server</label>

    <div id="id_form-0-server">
      <ul>
        <li class="">
          <label>
            <input type="checkbox" name="form-0-server" value="ABC" id="id_form-0-server_0"> 
            <span>ABC</span>
          </label>
        </li>
        <li class="">
          <label>
            <input type="checkbox" name="form-0-server" value="EFD" id="id_form-0-server_1">
            <span>EFD</span>
          </label>
        </li>
        <li class="">
          <label>
            <input type="checkbox" name="form-0-server" value="KIS" id="id_form-0-server_2">
            <span>KIS</span>
          </label>
        </li>
        <li class="">
          <label>
            <input type="checkbox" name="form-0-server" value="PNJS" id="id_form-0-server_3">
            <span>PNJS</span>
          </label>
        </li>
        <li class="">
          <label>
            <input type="checkbox" name="form-0-server" value="PJSGRA" id="id_form-0-server_4">
            <span>PJSGRA</span>
          </label>
        </li>
        <li class="">
          <label>
            <input type="checkbox" name="form-0-server" value="KLSCV" id="id_form-0-server_5">
            <span>KLSCV</span>
          </label>
        </li>
      </ul>
    </div>
  </div>

【讨论】：

但如果我为 Span 和 Input 提供不同的值，这将不起作用。其实我想根据跨度值进行过滤
没问题，我改代码改用span了
我还删除了清除内联点击并添加了一个 preventDefault

【解决方案2】：

您的复选框已经有value ="youareseacrhing"，您可以使用它来进行搜索。

演示代码：

(function($) {
  $(document).ready(function() {
    // Options search field
    $('#options').before(
      '<input id="search" style="display: inline; width:180px;" type="text" />' +
      '<span><a href="" onclick="return false;" id="search-clear">X</a></span>'
    );
    $('#search').keyup(function() {
      var valThis = $(this).val().toLowerCase();
      $('li span').each(function() {
        //use checkbox val
        var text = $(this).text().toLowerCase();
        //closest to hide lis
        (text.indexOf(valThis) > -1) ? $(this).closest('li').show(): $(this).closest('li').hide();
      });
    });
    // Search clear button
    $("#search-clear").click(function() {
      $("#search").val("");
      $('input[type=checkbox]').each(function() {
        $(this).closest('li').show();
      });
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="options">
  <div class="col s12  ">

    <label>Server</label>

    <div id="id_form-0-server">
      <ul>
        <li class="">
          <label>
                <input type="checkbox" name="form-0-server" value="ABC" id="id_form-0-server_0"> 
                <span>ABC-1-2</span>
              </label>
        </li>
        <li class="">
          <label>
                <input type="checkbox" name="form-0-server" value="EFD" id="id_form-0-server_1">
                <span>EFD-1-3</span>
              </label>
        </li>
        <li class="">
          <label>
                <input type="checkbox" name="form-0-server" value="KIS" id="id_form-0-server_2">
                <span>KIS-1-46</span>
              </label>
        </li>
        <li class="">
          <label>
                <input type="checkbox" name="form-0-server" value="PNJS" id="id_form-0-server_3">
                <span>PNJS-1</span>
              </label>
        </li>
        <li class="">
          <label>
                <input type="checkbox" name="form-0-server" value="PJSGRA" id="id_form-0-server_4">
                <span>PJSGRA-1-10</span>
              </label>
        </li>
        <li class="">
          <label>
                <input type="checkbox" name="form-0-server" value="KLSCV" id="id_form-0-server_5">
                <span>KLSCV-1</span>
              </label>
        </li>
      </ul>
    </div>
  </div>

【讨论】：

如果我像 ABC 一样按相同的顺序输入所有内容，这是有效的，但如果我只搜索 BY，那么它会显示空结果。但即使我输入 BY，我也希望过滤器能够正常工作
代码气味有一个三元使用副作用。
如果我的复选框值和属性值是 diff @Swati，我会更新我的代码，你能检查一下

【解决方案3】：

可能是因为当您获得相应标签的文本时，您还会获得大量空白，而不是将其修剪掉。

反正 chekboxes 的 value 属性似乎与标签文本相对应，那么为什么不使用它来进行比较呢？

改变

var text = $("label[for='"+$(this).attr('id')+"']").text().toLowerCase();
(text.indexOf(valThis) == 0) ? $(this).parent().show() : $(this).parent().hide();

到

$(this).parent()[this.value.indexOf(valThis) === 0 ? 'show' : 'hide']();

【讨论】：

真的吗？我用你的 HTML 试了一下，效果很好。