Bonjour,

Je sais que je ne sui pas tout à fait au bon endroit mais le framework Slim est un symfony light. Alors j'espère que les solutions sont proches ...
J'ai trouvé diverses choses avec des problématiques approchantes sur le web (openclassrooms, stackoverflow), mais rien de fonctionne.

Ce que je fais

Alors mon fichier twig actuel

{# LA PARTIE DU FORMULAIRE #}

<div class="col m7 ">
                                    <p class="form-text offset-m1 col m11">Opérateurs</p>
                                    <div class="input-field col m3">
                                        <input id="select-all-operators" name="select-all-operators" type="checkbox">
                                        <label for="select-all-operators">Tous</label>
                                    </div>

                                    <div class="input-field col m9" id="selectionOperators">
                                        <select multiple class="input-field" id="operator" name="operator[]">
                                            <span class="listeDeroulante">
                                                <option value="" disabled selected>----</option>
                                                {% for operator in operators %}

                                                        <option name="{{ operator.DENOMINATION_1 }}" value="{{ operator.DENOMINATION_1 }}">{{ operator.DENOMINATION_1 }}</option>

                                                {% endfor %}

                                            </span>
                                        </select>
                                        <label class="input-field">Ou choisir un opérateur</label>
                                    </div>

                                </div>

{# LE BLOC SCRIPT  EN FIN DE PAGE#}

{% block script %}
        {#Pour l'affichage de l'input select#}
        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>

        {#Pour le tableau#}
        <script src="{{ base_url() }}/js/sortable.js"></script>

        {#Pour le bouton checkbox : Tous#}
        <script src="{{ base_url() }}/js/selectAll-None.js"></script>

        {#Activation des fonctions au lancement de la page#}
        <script>
            window.onload = function() {
                sauvegardeCheck();
                typeCheck();
                eventListenerSelect();
            }
        </script>
    {% endblock %}

le fichier selectAll-None.js

function eventListenerSelect() {
    //Ne cocher aucun robot
    $('#select-none').click(function() {
        if($(this).is(':checked')) {
            $("#selectionOrdis").find('input[type=checkbox]').each(function () {
                this.checked = false; //on décoche tous les ordis
            });

            $('select#ordi option').removeAttr("selected");  //on retire l'attribut 'selected'

            document.getElementById("select-all").checked = false;
        }
    });

    //Cocher tous les robots
    $('#select-all').click(function() {
        if($(this).is(':checked')) {
            $("#selectionOrdis").find('input[type=checkbox]').each(function () {
                this.checked = true; //on coche tous les ordis
            });

            $('select#ordi option').prop("selected", "selected"); //on applique l'attribut 'selected'

            document.getElementById("select-none").checked = false;
        }
    });

    //Cocher tous les opérateurs
    $('#select-all-operators').click(function() {
        if($(this).is(':checked')) {
            $("#selectionOperators").find('input[type=checkbox]').each(function () {
                this.checked = true; //on coche tous les opérateurs
            });

            //on applique l'attribut 'selected' à l'élément html
            $("select#operator option").prop("selected", "selected");

        }
    });
}

Ce que je veux

Alors voilà le topo :

j'ai une checkbox (appelons la checkAll) et un select dans mon formulaire.
Je voudrais que quand on coche checkAll, cela coche toutes les checkboxs de mon select.

Et quand cela sera ok, j'aimerai que si une des checkboxs contenuent dans le select n'est pas cochée, cela décoche automatiquement checkAll.

Ce que j'obtiens

Le code ne fonctionne pas du tout, pourtant je me suis appuyée sur de l'existant qui fonctionne. Les fonctions select-All et select None fonctionnent, mais elles sont utilisées dans un autre twig.

1 réponse


Bon, j'ai trouvé une partie de la solution.

Maintenant, quand on coche checkAll, j'ai bien toutes les checkboxs du select qui sont cochées et quand on décoche checkAll, toutes les checkbox du select sont décochées.

J'avais un problème avec une autre fonction javascript (que je n'utilise pas encore, mais qui devrait servir pour un tableau plus bas)

Donc le fichier twig

{# LA PARTIE DU FORMULAIRE #}

<div class="col m7 ">
                                    <p class="form-text offset-m1 col m11">Opérateurs</p>
                                    <div class="input-field col m3">
                                        <input id="select-all-operators" name="select-all-operators" type="checkbox">
                                        <label for="select-all-operators">Tous</label>
                                    </div>

                                    <div class="input-field col m9" id="selectionOperators">
                                        <select multiple class="input-field" id="operator" name="operator[]">
                                            <span class="listeDeroulante">
                                                <option value="" disabled selected>----</option>
                                                {% for operator in operators %}
                                                        <option name="{{ operator.DENOMINATION_1 }}" value="{{ operator.DENOMINATION_1 }}">{{ operator.DENOMINATION_1 }}</option>
                                                {% endfor %}

                                            </span>
                                        </select>
                                        <label class="input-field">Ou choisir un opérateur</label>
                                    </div>

                                </div>

{# LA PARTIE SCRIPT EN FIN DE FICHIER#}

{% block script %}
        {#Pour l'affichage de l'input select#}
        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>

        {#Pour le bouton checkbox : Tous#}
        <script type="text/javascript" src="{{ base_url() }}/js/selectAll-None.js"></script>

        {#Activation des fonctions au lancement de la page#}
        <script>
            window.onload = function() {
                eventListenerSelect();
            }
        </script>
    {% endblock %}

La fonction qui est dans le fichier selectAll-None.js

function eventListenerSelect() {

    //Cocher tous les opérateurs
    $("#select-all-operators").click(function() {
        $("#selectionOperators").find('input[type=checkbox]').each(function () {
            this.checked = false; //on décoche tous les opérateurs
        });

        //on enlève l'attribut 'selected' à l'élément html
        $("select#operator option").removeAttr("selected");

        if($(this).is(':checked')) {
            $("#selectionOperators").find('input[type=checkbox]').each(function () {
                this.checked = true; //on coche tous les opérateurs
            });

            //on applique l'attribut 'selected' à l'élément html
            $("select#operator option").prop("selected", "selected");
        }

    });
}

Il me reste plus qu'à faire la fonction qui décoche checkAll si une seule des checkbox du select n'est pas cochée.

Voilà si ça peut aider quelqu'un.