show and hide div on multiple checkbox values jquery

I have div like that

<div data-tags=" LargeFaceDetected Neutral"></div>
<div data-tags=" LargeFaceDetected Sadness"></div>
<div data-tags=" LargeFaceDetected Sadness Neutral"></div>
<div data-tags=" LargeFaceDetected Happy"></div>

And I have filtered them on the basis of check box values, my each checkbox look like this

            <a href="#">
              <label class="with-label">
                <input type="checkbox" name="r1" value="LargeFaceDetected">Large Face
              </label>
            </a>

and In jquery side what I am doing is

filterImages = (e) ->
  regex = new RegExp('\\b\\w*' + e + '\\w*\\b')
  $('.for-filter').hide().filter(->
    regex.test $(this).data('tags')
  ).show()
  return

onImageSearch = ->
  $('.with-label').on "click", ->
    console.log $('input[name=r1]:checked').val()
    selectTag = $('input[name=r1]:checked').val()
    filterImages(selectTag)
    return

But this only works for one values at a time. As In past I was working with Radio buttons instead of checkboxes. But Now I have all checkboxes, and Its not working if there is multiple checkboxes have been selected. For example: User have selected LargeFaceDetected And Neutral, then all divs containing those values should appear, But Now only appearing which have been clicked first. Please help me in this.