如果复选框与输入文本不匹配则隐藏复选框

Question

基本上我有一个像这样的复选框列表

<label style='padding-right:30px;' >
<input type='checkbox' name='tag[]' value='1'> bob ;
<input type='checkbox' name='tag[]' value='2'> john ;
<input type='checkbox' name='tag[]' value='3'> mary ;
</label>

我还有一个输入框供用户输入要显示的复选框

<input type="text" name="filter" placeholder="Filter Tag Name" id="filter" >

我想要的是当用户键入 bob 时，所有没有 bob 文本值的复选框都将被隐藏。

我目前有一个 java 脚本，但它匹配复选框的值而不是它的文本

JS如下

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $('#filter').on('keyup', function() {
    var query = this.value;
    $('[name^="tag[]"]').each(function(i, elem) {
              if (elem.value.toLowerCase().indexOf(query) != -1) {
                  $(this).parent().css('display', 'inline-block');
                  $(this).css('display', 'inline-block');
              }else{
                  $(this).parent().css('display', 'none');
                  $(this).css('display', 'none');
              }
        });
    });
</script>

Answer 1

用跨度围绕您的复选框以轻松提取其文本
使用 input 事件，只要输入改变就会触发。这比 keyup 好，因为 keyup 可能会在单击 ctrl 按钮时触发，例如
默认显示复选框。然后检查它的 trimmed 值是否包含过滤值。如果没有，则隐藏

$('#filter').on('input', function() {
  var filter = $(this).val();
  var options = $('span:has(:checkbox)');
  options.each(function() {
    $(this).show();
    if ($(this).text().trim().indexOf(filter) < 0) {
      $(this).hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<label style='padding-right:30px;' >
<span><input type='checkbox' name='tag[]' value='1'> bob</span>
<span><input type='checkbox' name='tag[]' value='2'> john </span>
<span><input type='checkbox' name='tag[]' value='3'> mary </span>
</label>
<input type="text" name="filter" placeholder="Filter Tag Name" id="filter" >

如果复选框与输入文本不匹配则隐藏复选框

Hide checkboxes if they do not match input text

javascript

checkbox

jquery