Проверка / снятие флажка массива флажков с помощью jQuery

Question

У меня есть HTML-форма с флажками сезонов и набор кнопок сезонов.Я хочу, чтобы jQuery устанавливал флажки при нажатии на кнопки.Например, когда я нажимаю кнопку «Зима», она должна установить флажки «декабрь, январь, февраль».Почему-то мой код не работает.

$("#btnWinter").click(function() {
  $("#season[0]").prop('checked', true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Season <label><input type="checkbox" id="season[]" name="season[]" value="January"> January </label>
<label><input type="checkbox" id="season[]" name="season[]" value="February"> February </label>
<label><input type="checkbox" id="season[]" name="season[]" value="March"> March </label>
<label><input type="checkbox" id="season[]" name="season[]" value="April"> April </label>
<label><input type="checkbox" id="season[]" name="season[]" value="May"> May </label>
<label><input type="checkbox" id="season[]" name="season[]" value="June"> June </label><br/>
<label><input type="checkbox" id="season[]" name="season[]" value="July"> July </label>
<label><input type="checkbox" id="season[]" name="season[]" value="August"> August </label>
<label><input type="checkbox" id="season[]" name="season[]" value="September"> September </label>
<label><input type="checkbox" id="season[]" name="season[]" value="October"> October </label>
<label><input type="checkbox" id="season[]" name="season[]" value="November"> November </label>
<label><input type="checkbox" id="season[]" name="season[]" value="December"> December	</label><br/>

<input type="button" id="btnWinter" name="btnWinter" value="Winter" />

Answer 1

Это быстрый и грязный способ сделать это с помощью JavaScript.Использование имен, а не идентификаторов.

$("#btnWinter").click(function () {
    chk = document.getElementsByName("season[]");

    chk[11].click();

    for (i = 0; i < 2; i++) {
        chk[i].click();
    }
});

Answer 2

В общем, все комментарии относительно имен и идентификаторов в вашем коде должны быть учтены.Избегайте специальных символов, идентификатор должен быть уникальным и т. Д. Код, приведенный ниже, должен работать на основе вашего существующего.Пожалуйста, посмотрите на лучшие практики и примеры.Это сравнительно легко сделать, просто кажется, что вы недостаточно исследовали.Отредактировано: добавлено декабря ...

$("#btnWinter").click(function() {
  $("#0").prop('checked', true);
  $("#1").prop('checked', true);
  $("#11").prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Season <label><input type="checkbox" id="0" name="season" value="January"> January </label>
<label><input type="checkbox" id="1" name="season" value="February"> February </label>
<label><input type="checkbox" id="2" name="season" value="March"> March </label>
<label><input type="checkbox" id="3" name="season" value="April"> April </label>
<label><input type="checkbox" id="4" name="season" value="May"> May </label>
<label><input type="checkbox" id="5" name="season" value="June"> June </label><br/>
<label><input type="checkbox" id="6" name="season" value="July"> July </label>
<label><input type="checkbox" id="7" name="season" value="August"> August </label>
<label><input type="checkbox" id="8" name="season" value="September"> September </label>
<label><input type="checkbox" id="9" name="season" value="October"> October </label>
<label><input type="checkbox" id="10" name="season" value="November"> November </label>
<label><input type="checkbox" id="11" name="season" value="December"> December	</label><br/>

<input type="button" id="btnWinter" name="btnWinter" value="Winter" />