勾选复选框，列出包含其名称的元素

Question

我想做以下几点：

描述

当检查Ingredients selection下的复选框时，只显示使用了检查成分的菜肴。使用复选框是因为应该能够一次选择多种成分。

因此，如果选中tomato和garlic，则spaghetti下只能看到Dishes这道菜。

代码

my_html.html

<h1>Ingredients selection</h1>   
  <ul class="ingredient">
    <li><label>tomato</label><input type="checkbox" name="" value=""></li>
    <li><label>garlic</label><input type="checkbox" name="" value=""></li>
    <li><label>peas</label><input type="checkbox" name="" value=""></li>
  </ul>

<h1>Dishes</h1>
  <ul class="dish">
    <li style="display:none">spaghetti<span>[Ingredient: tomato, Ingredient: garlic]</span></li>
    <li style="display:none">stir_fry<span>[Ingredient: garlic, Ingredient: peas]</span></li>
    <li style="display:none">ice_cream<span>[Ingredient: sugar, Ingredient: milk]</span></li>
  </ul>

<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="/static/js/script.js"></script>

请注意，这些值是通过模板语言从数据库生成的。

我走了多远：

的script.js

$(function () {
  ////Jquery in here/////
  $("input").change(function () {
    if (this.checked) {
      var selected_ingredient = $(this).parent().text();
      var dishes = $("ul.dish").html();
      /*
      // Pseudocode
      for li_element in dishes{
        if (selected_ingredient in li_element){
          li_element.overwrite_attribute(style, "display:block");
        }
      }
      */
    }

  });
});

如何实现此功能？

Here是代码的演示。

Answer 1

这样的事情：

$(function () {
    $(".ingredient input").on('change', function () {
        var check = $.map($(".ingredient input:checked"), function(el) {
            return $(el).siblings('label').text();
        });

        $('.dish li').hide().each(function(_, self) {
            for (var i=0; i<check.length; i++) {
                if ( $(self).find('span').text().toLowerCase().indexOf( check[i].toLowerCase() ) != -1 ) 
                    $(self).show();
            }    
        });
    });
});

FIDDLE

Answer 2

我稍微改进了你的代码，

这是LIVE DEMO

JS CODE：

  $(function () {
 ////Jquery in here/////
$(".ingredients").on('click',function () {
//  alert($(this).is(':checked'));

 if ($(this).is(':checked')) {
  var selected_ingredient = $(this).parent().text();
    $('.dish li').each(function(){
        var dishIngr=$(this).text();
        if(dishIngr.indexOf(selected_ingredient) >= 0)
        //if(dishIngr:contains(selected_ingredient))
        {
            $(this).removeClass('hide');
        }
      /*  else
        {
            $(this).addClass('hide');
        }*/

    });

  //var dishes = $("ul.dish").html();
  /*
  // Pseudocode
  for li_element in dishes{
    if (selected_ingredient in li_element){
      li_element.overwrite_attribute(style, "display:block");
    }
  }
  */
}
   else {
        $('.dish li').each(function () {
            if (!($(this).hasClass('hide'))) $(this).addClass('hide');
        });
        }

});
});

HTML CODE：

在html代码部分，我只更改了一件事，为所有复选框组件添加了一个类。

快乐编码：）

Answer 3

使用以下代码：

$(function () {
  $("input").change(function () {
    if (this.checked) {
      var selected_ingredient = $(this).parent().text();
        $("ul.dish li").each(function(){
            if($(this).is(':contains('+selected_ingredient+')')){
               $(this).css("display","block");
            }
        });
   }else{
      $("ul.dish li").each(function(){
            if(!$(this).is(':contains('+selected_ingredient+')')){
               $(this).css("display","none");
            }else{
                $(this).css("display","block");
            }
        });
      }
  });  
});