Symfony 3 - JS - Как отключить набор флажков по нажатию переключателя?

Question

в виде веточки, которая позволяет мне делать статистику. Я отображаю несколько вещей:

Групповой переключатель, который позволяет мне выбрать либо «Вариант A», «Вариант B», «Оба».

И набор флажков, относящихся к типам пользователей.Они будут отображаться через запрос к базе данных.

Примерно так:

<legend>Type : Sélectionner tout <input type="checkbox" id="selectAll" value="selectAll" class="selectAllCheckboxes"></legend>
                    {% for unType in listeTypeUser %}
                    <input type="checkbox" name="typesUser[]" value={{unType.typeUtilisateur}}>{{unType.typeUtilisateur}}<br>       
                    {% endfor %}

У меня уже есть функция в javascript, позволяющая мне выбирать все и отменять выбор сразу.

Теперь я хотел бы сделать следующее:

Если я выберу «Внешний», то я хочу, чтобы в списке типов пользователейТип "1-й градус" автоматически проверяется, а на остальное нельзя.

И наоборот:

If "CAS", то все остальные типы имеют возможность проверить, кроме типа" 1-й степени ".

Но так как я абсолютно ничего не знаю о javascript, я отображаю свои типы пользователей через базу данных, и я делаюне пиши их сам, не вижу как я это воспринимаюСпасибо за вашу помощь!

Answer 1

Это довольно простой Javascript. Ваша HTML-разметка должна быть примерно такой (имеется в виду классы)

<div class="radio-button">
<label><input type="radio" name="service" value="cas"/> CAS</label>
<label><input type="radio" name="service" value="external"/> Externe</label>
<label><input type="radio" name="service" value="both"/> Les deux</label>
</div>

<div class="checkboxes">
<label><input type="checkbox" name="circo"/> CIRCO</label>
<label><input type="checkbox" name="first-degree" data-excluded-check="1"/> 1er degré</label>
<label><input type="checkbox" name="rectorat"/> Rectorat</label>
</div>

И затем вы можете добавить этот бит JS. Я не проверял это, но вы должны быть в состоянии настроить его мягко.

<script>
var radios = document.querySelectorAll('.radio-button input');

for (var i = 0; i < radios.length;i++) {
    radios[i].addEventListener('change', function(event) {
        if (this.value == 'cas') {
            checkAllBoxForCas();
        }
    });
}

function checkAllBoxForCas() {
    var boxes = document.querySelectorAll('.checkboxes input');

    for (var j = 0; j < boxes.length; j++) {
         boxes[j].checked = !boxes[j].dataset.excludedCheck;
    }
}
</script>

Вы можете настроить его по желанию, он полностью совместим с JS.