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 %}
{#{% if selectAllOperators is checked %}#}
<option name="{{ operator.DENOMINATION_1 }} value="{{ operator.DENOMINATION_1 }}">{{ operator.DENOMINATION_1 }}</option>
{#{% else %}#}
{#<option name="{{ operator.DENOMINATION_1 }} value="{{ operator.DENOMINATION_1 }}" selected>{{ operator.DENOMINATION_1 }}</option>#}
{#{% endif %}#}
{% 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.