How to remove :checked on click on any of the elements with a certain class?

Question

css

I decided to try to make a burger menu through a checkbox (with checked open, without closed).

<header class="header">
    <input type="checkbox" id="main-navigation-toggle" class="btn btn--close" title="Toggle main navigation" />
    <label for="main-navigation-toggle">
        <span></span>
    </label>

    <nav id="main-navigation" class="nav-main">
        <ul class="menu">
            <li class="menu__item">
                <a class="menu__link" href="#Iceland">Исландия</a>
            </li>
            <li class="menu__item">
                <a class="menu__link" href="#Norway">Норвегия</a>
            </li>
        </ul>
    </nav>
</header>

Tried like this

var el = document.getElementById('.menu__link');
el.addEventListener('click', function () {
    $("#main-navigation-toggle").removeAttr("checked");
})

so

var el = document.querySelectorAll('.menu__link');
el.addEventListener('click', function () {
    $("#main-navigation-toggle").removeAttr("checked");
});

did not work (styles are working, through querySelector on the first element of the menu item everything is good). Silly question, but I'm missing something.

Answer 1

give this submenu some class. and with media (max-width: 800px) give the class position: relative; left: 0;

Answer 2

$("body").on("click", ".menu__link", function () {
    $("#main-navigation-toggle").prop("checked", false);
});

Either this option

$(".menu__link").on("click", function () {
    $("#main-navigation-toggle").prop("checked", false);
});