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

使用跨度环绕您的复选框以轻松提取文本
使用//Location[@id='some_id']/Computer[ConformSets/Set='some_set_value']事件，只要输入发生变化，该事件就会触发。这比input更好，因为keyup可能会在点击keyup按钮时显示
默认显示复选框。然后检查其 trimmed 值是否包含过滤器值。如果没有，则隐藏

＆＃13;

ctrl

＆＃13;

$('#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();
    }
  });
});

＆＃13;

Answer 2

分别对每个复选框使用label，以便可以使用自己的label
使用data属性存储有关checkbox本身的复选框相关信息。

Demo

$('#filter').on('keyup', function() {
  var query = $(this).val();

  $('[name^="tag[]"]').each(function(i, elem) {
    var dataUser = $(this).data('user').toLowerCase();

    $(this).parent().toggle(query.indexOf(dataUser) > -1);
  });
});

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

隐藏复选框，如果它们与输入文本

2 个答案: