Checkbox not working the way I want it

I am new to this so please be patient with me :)

So I am creating a photo gallery and I used checkboxes to filter them. Actually these are photos of movie posters and I would like to filter them according to their genre and year.

Checkboxes are working fine. Also works fine with multiple selection. But the problem with multiple selection is when you unselect one of them.

For example:

I have checkboxes A, B, and C.

When I select A and B, it will only show images with both classes A and B, it will remove the rest. So it works fine that way.

But when I unselect one of the "checked" boxes, like for example I would unselect A, it should only show those images with class B. What happens is it returns other images that is not under Class B. Is there something wrong with the code especially the conditional part?

<script type="text/JavaScript">
buttons = document.querySelectorAll("#insidefilter input[type=checkbox]");

animationstring = 'animation',
animation = false,
keyframeprefix = '',
domPrefixes = 'webkit moz o khtml'.split(' '),
pfx = '',
content = document.getElementById("content");
if (content.style.animationName !== undefined) {
    animation = true;
}
if (animation === false) {
    for (var i = 0; i < domPrefixes.length; i++) {
        if (content.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
            pfx = domPrefixes[i];
            animationstring = pfx + 'Animation';
            animation = true;
            break;
        }
    }
}

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', filter, false);
}

function filter() {
    movie = this.id;
    notMovie = document.querySelectorAll("img:not(." + movie + ")");
    for (var i = 0; i < notMovie.length; i++) {
        if (this.checked) {
            notMovie[i].style[animationstring] = "fadeandsmallify 1.6s forwards";
        } else {
            notMovie[i].style[animationstring] = "solidandlarger 1.6s";
        }
    }
};
</script>

I copied that online and edited some part of it myself. I have no intention to use it for money, just for practice purposes. Thank you for anyone who can help me. Please disregard the other codes that has nothing to do with the checkboxes. I did not remove it because honestly I don't understand what some of them do. Sorry.

PS: insidefilter is the div where i code my checkboxes for genre, insidefilteryear is for my checkboxes for year and content is the div where the images are shown. I separated two groups of checkboxes because I want to disable other checkboxes in the filter "year" when one is checked since it is not possible for a movie to have more than one year but it can have more than one genre.