Javascript 选中复选框时需要在显示/隐藏时相交多个图像

我是Javascript/Jquery新手，所以请耐心听我解释我遇到的问题

基本设置： -#中间分区-包含一个包含4个类别（艺术家、工具、位置和样式）的菜单。每个类别下面都有多个复选框。 -#right div-包含缩略图的图像库，在css中设置了不透明度为50%的灰度过滤器

目标： 当用户选择任何类别的其中一个复选框时，相应的图像将根据复选框的选择显示/隐藏。在显示时，图像在100%不透明度时变为“无过滤”

我可以让每个复选框在选择时独立显示/隐藏图像，但我想找到一种方法，只显示与选中的选择共享同一类的图像。例如，如果选择artistName1和Location1，则只应显示这两个选择之间共享的图像，但此时将显示artistName1和Location1的所有图像。在阅读了不同的论坛之后，我正在寻找一种将这些内容交叉的方法

Javascript: $（文档）.ready（函数（）{ “严格使用”

---

你能谈谈你的问题吗？很有帮助。如果你谈到代码段中不存在的元素，请添加更多的代码。伙计…我已经开始编写代码了…但它不满足这两个要求…也许这可以给你一个起点。谢谢，这是一个很好的起点！！我能够实现，你设置的代码也可以工作…正如您所提到的，我仍在寻找一种同时满足这两个要求的方法。同时，在您提供的代码中，当选择未选中时，我如何使我的标题隐藏？我试图放入else语句，但标题保留。

  //begin Artist Name 1
  $('#Broderick').val($(this).is(':checked'));

  $('#Broderick').change(function() {
        if ($(this).is(':checked')) {
          $('.Brod').css({
            filter: 'none',
            opacity: '1'
          });
          $('.Brod').parent().next().css({
            opacity: '.8'
          });
        } else {
          $('.Brod').removeAttr('style');
          $('.Brod').parent().next().removeAttr('style');
        }

        //begin Artist Name 2 
        $('#Kenny').val($(this).is(':checked'));

        $('#Kenny').change(function() {
              if ($(this).is(':checked')) {
                $('.Kenn').css({
                  filter: 'none',
                  opacity: '1'
                });
                $('.Kenn').parent().next().css({
                  opacity: '.8'
                });
              } else {
                $('.Kenn').removeAttr('style');
                $('.Kenn').parent().next().removeAttr('style');
              }

              //begin Location 1
              $('#Northeast').val($(this).is(':checked'));

              $('#Northeast').change(function() {
                    if ($(this).is(':checked')) {
                      $('.NE').css({
                        filter: 'none',
                        opacity: '1'
                      });
                      $('.NE').parent().next().css({
                        opacity: '.8'
                      });
                    } else {
                      $('.NE').removeAttr('style');
                      $('.NE').parent().next().removeAttr('style');
                    }

               //begin Location 2
                    $('#Southeast').val($(this).is(':checked'));

                    $('#Southeast').change(function() {
                      if ($(this).is(':checked')) {
                        $('.SE').css({
                          filter: 'none',
                          opacity: '1'
                        });
                        $('.SE').parent().next().css({
                          opacity: '.8'
                        });
                      } else {
                        $('.SE').removeAttr('style');
                        $('.SE').parent().next().removeAttr('style');
                      }

                    });