Can’t get getElementsByClassName or querySelectorAll to work

Here’s a fiddle that i (partly) got to work with the queryselector. http://jsfiddle.net/03rc2j91/
It only hides the first element as it should. But i need to hide all the elements with the same class.

I’m working on a project where i need to target the same class to hide all the images within that class.

I tried using querySelectorAll but it didn’t work. Same problem with getElementsByClassName()

Queryselector is the only one i got to work but it’s not enough to hide just the first element.

Your help would be much appreciated,
Thanks!

function toggleBoxVisibility() {

  if (document.querySelector(".check").checked == true) {

    document.querySelector(".box").style.opacity = '0';

  } else {

    document.querySelector(".box").style.opacity = '1';

  }
}