Javascript 如何实现复选框或面向类别的照片库

我不确定用什么样的方式来表达这个问题，这就是为什么谷歌让我绞尽脑汁

基本上，我想创建一个包含（例如）30张图片的照片库，在这30张图片中，有3种不同的类别可以放入其中

我希望用户能够单击复选框来显示或隐藏不同类别（以及后续图片）或查看所有类别

例如，照片库左侧将有4个复选框。顶框将是全部，然后是类别1、类别2、类别3。单击每个框时，只会显示那些“类型”的图像

任何关于代码的提示（甚至是我应该寻找的代码类型，即CSS、Javascript、jQuery）都将不胜感激。谢谢

CSS->

.chkbox-container{
  float:left;
  width:95px;
  border:1px solid #ccc;    
}
.img-container{
  float:left;
  width:300px;
  border:1px solid #ccc;    
}
img{
  display:inline-block;
  width:90px;
  height:75px;
  padding:2px;
  border:1px solid black;
  display:none;    
}

JQuery->

$('.chkbox-container :radio').on('change', function(){
  var me = $(this);
  $.each($('.img-container img'), function(i,v){
    var theCats = $(v).attr('rel');
    theCats = theCats.split(' ');
    if($.inArray(me.val(), theCats)){
      $(v).show();
    }else{
      $(v).hide();
    }

  });        
});

HTML->

<div class="chkbox-container">
  <input type="radio" name="catfilter[]" value="all" checked="checked"/> All<br/>
  <input type="radio" name="catfilter[]" value="category1" /> Category 1<br/>
  <input type="radio" name="catfilter[]" value="category2" /> Category 2<br/>
  <input type="radio" name="catfilter[]"value="category3" /> Category 3<br/>
</div>
<div class="img-container">
  <img src="path.to/the/image/ext" rel="category1" />
  <img src="path.to/the/image/ext" rel="category2" />
  <img src="path.to/the/image/ext" rel="category3" />
</div>

全部

类别1

类别2

类别3

---

您计划如何交付图像？它们是否都在页面加载时填充，然后隐藏，当您单击要淡入的复选框时？或者，您正在使用ajax驱动此站点，并且计划向服务器发送查询以发回所需的图像。另外，您将如何存储复选框和图像之间的关系

类别在图像的rel属性中的位置，我们分割rel并检查复选框值是否在图像rel的数组中？您有很多选项可以执行此操作。HTML、CSS、JQUERY和PHP可能是我的选择。Ohgodwhy上面有一些好主意。@Ohgodwhy我理想地希望它们都在页面加载时填充。它们将是缩略图，当然会在点击时放大。这种关系就像你说的那样。@subcented我肯定更喜欢使用HTML/CSS/Javascript，在这方面我比说PHP/jQuery更了解它们（尽管我可以用两种语言做一点）干得好。