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

#javascript #php #function #symfony #checkbox

#javascript #php #функция #symfony #флажок

Вопрос:

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

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

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

Вот так :

 <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-я степень», а остальные не могут быть.

И наоборот :

введите описание изображения здесь

Если установлен флажок «CAS», то все остальные типы могут быть проверены, за исключением типа «1-я степень».

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

Комментарии:

1. Вместо «хакерского» способа, представленного Флоран Дестремо ниже, я бы использовал symfony.com/doc/current/form/dynamic_form_modification.html

Ответ №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 как есть.

Комментарии:

1. Спасибо за ваш ответ. Однако, если для типов пользователей я не пишу их вручную, но я позволяю своей базе данных завершить это, будет ли это работать таким же образом? Я протестирую вашу функцию, спасибо!

2. Я отредактировал свой ответ. Вы можете добавить любую разметку из своей базы данных, чтобы отфильтровать флажки, которые вы не хотите проверять