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

我想提出以下意见：

描述 当选中

配料选择

下的复选框时，只应显示使用选中配料的菜肴。使用复选框是因为可以同时选择多种成分

因此，如果要检查

番茄

和

大蒜

，那么在

碟子

下只能看到碟子

意大利面

代码 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>

如何实现此功能

是代码的演示。

类似于以下内容：

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

$（函数（）{
$（“.component input”）.on（'change'，function（）{
变量检查=$.map（$（“.Component input:checked”），函数（el）{
返回$（el）.同级（'label'）.text（）；
});
$（'.dish li'）.hide（）.each（函数（_，self）{
对于（var i=0；i我对您的代码进行了一些改进

这是一个

JS代码：

  $(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代码：

  $(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代码部分，我只改变了一件事，为所有复选框成分添加了一个类

快乐编码：）
使用以下代码：

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

邪恶的天才又来了！：）你知道我怎么才能在所有配料都打勾的情况下展示一道菜吗？例如，
炒菜
只有在我打勾
大蒜
和
豌豆
时才会出现。酷，这看起来更容易阅读。但是，当你取消勾选复选框时，菜应该会再次消失。更好，但如果我打勾
豌豆
和
番茄
它应该显示
意大利面
和
炒菜
。如果你只让一道菜在所有配料都打勾时才显示出来，那就更好了。实际上它还没有阿德内奥的答案那么笼统，因为当你选择
豌豆
和
番茄
时，它只显示
意大利面
应该是
意大利面
和
炒菜
。