change style through checkbox

I’m working ona fullcalendar project.

I have these 2 checkboxes (Ore Personali e Assenze), when they are checked they should hide the events but at the moment they are not doing it.

This is my input checkbox:

<input type="checkbox" id="OP" name="calendario" value="OP">

And this is the function i’ve build so far:

$(document).ready(function() {
            $('input[type="checkbox"]').click(function() {
                var checkBox = document.getElementById("OP");
                var x = document.getElementsByClassName("fc-event-container");
                if (checkBox.checked === true){
                    x.style.visibility = "visible !important";
                }else{
                    x.style.visibility = "hidden !important";
                }
            })
        })

I build it by looking on the internet cause i’m new to JS and dont know much, just basic stuff.
And it’s giving error in the x.style part (telling me is undefined).
Can someone explain to me how i should do it, cause on internet i only found this way and some other who’s just giving me errors anyway.

thanks in advances whos gonna help me (or at least try)

i did as @Cypherjac suggest and it worked.

But now it just hide the events on the current month, when i change months i have to checked and unchecked to hide. Even if i go back to the month i hid the events they are visible
Is there a way to let them stay hide even if i change month?

>Solution :

Since you’re already using jQuery, you can use it to access the elements instead of native js

Here $(this).prop('checked') is being used to check the checked property of the checkbox

Then when it changes, change the visibility of the element based on the current state..

NOTE: The checkbox is checked initially because the element to toggle is visible when the document loads

$(function() {
    $('input[type="checkbox"]').on('change', function() {
        x = $('.fc-event-container')
        // Access the element using jQuery
        if($(this).prop('checked')){
            x.css({
                'visibility': 'visible'
            })
        }
        else {
            x.css({
                'visibility': 'hidden'
            })
        }
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="fc-event-container">
    Toggle the checkbox to toggle me
</div>

<input type="checkbox" id="OP" name="calendario" value="OP" checked>