How to hide several elements with JavaScript

I made a form in HTML with Symfony. I am trying to hide several elements when the checkbox is checked. I had no problem to hide only one element. But when I try to hide two elements, it doesn't work at all. To do so, I changed querySelector to querySelectorAll. I do not have results any more when I check my box. I don't understand why.

Thank you very much for helping.

JavaScript

const checkbox = document.querySelector("input[type=checkbox]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        document.querySelectorAll(".optional").style.display = "none";
        /* document.querySelector(".optional-validation").style.display = "initial"; */
    } else {
        document.querySelectorAll(".optional").style.display = "initial";
        /* document.querySelector(".optional-validation").style.display = "none"; */
    }
});

register.html.twig

{% extends 'base.html.twig' %}

{% block title %}Incris-toi !{% endblock %}

{% block main %}

{{ form_start(userform) }}

    <div class="form container">

        <div class="formpage">
            <div class="form-floating mb-3">
                {{ form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}}) }}
                {{ form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-floating mb-3">
                {{ form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}}) }}
                {{ form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-floating">
                {{ form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}}) }}
                {{ form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-checkbox">
                {{ form_widget(userform.roles) }}
                <span class="checkbox"></span>
                <span class="checkmark"></span>
            </div>
            <div>
                <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex mx-auto">Je m'inscris</button>
            </div>
        </div>
        <div class="formpage">
            <div class="form-floating mb-3">
                {{ form_widget(userform.occupation, {'attr' : {'placeholder' : 'Quelle est ton occupation (ton métier, tes études…) ?', 'class' : 'form-control'}}) }}
                {{ form_label(userform.occupation, 'Quelle est ton occupation (ton métier, tes études…) ?', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="mb-3">
                <p>De quel pays es-tu originaire ?</p>
                {{ form_widget(userform.nationality) }}
            </div>
            <div class="mb-3">
                <p>Quelle est ta langue maternelle ?</p>
                {{ form_widget(userform.nativelanguage) }}
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto">&lt;<span class="previous">Précédent</span></button>
                <button type="button" class="next optional btn btn-lg btn-outline-primary mt-4 d-flex ms-auto">Suivant</button>
                {# <button class="btn optional-validation btn-lg btn-outline-primary mt-4 d-flex ms-auto">Je valide</button> #}
            </div>
        </div>
        <div class="formpage">
            <div class="optional mb-3">
                <p>Quelle langue souhaites-tu pratiquer ?</p>
                <div class="wishedlanguagelist">
                    {{ form_widget(userform.wishedlanguages, {'attr' : {'class' : 'form-control mb-3'}}) }}
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="question-button btn btn-outline-secondary" id="addwishedlanguage">+ Ajouter une langue</button>
                    <button type="button" class="question-button btn btn-outline-secondary" id="removewishedlanguage">- Supprimer la dernière langue</button>
                </div>
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto">&lt;<span class="previous">Précédent</span></button>
                {{ form_row(userform.save, {'attr' : {'class' : 'btn btn-lg btn-outline-primary mt-4 d-flex ms-auto'}}) }}
            </div>
        </div>

    </div>

{{ form_end(userform) }}

{% endblock %}

{% block js %}

<script src="../assets/js/scripts.js"></script>

{% endblock %}