Checking/Unchecking check box array with jQuery

Question

I have a HTML form with check boxes of seasons, and set of buttons of seasons. I want jQuery to select check boxes when I click on the buttons. For example when I click on the Winter button it should check the Dec,Jan, Feb check boxes. Somehow my code does not seems to work.

$("#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" />

`[]` are special characters for selectors, used for attribute selection. If you want to use it in the id, you will have to escape them with `\\\` — Taplar, Oct 25 '18 at 14:42
However you are repeating ids, which is invalid syntax by web standards. https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page — Taplar, Oct 25 '18 at 14:42
What were you intending `winter[0]` to be? You seem to be attempting array syntax in an element selector. — isherwood, Oct 25 '18 at 14:46

score 0 · Accepted Answer · answered Oct 25 '18 at 14:50

In general, all comments regarding names and ids in your code should be considered. Avoid special characters, ID must be unique, etc... The code below should work based on your existing one. Please look for best practices and examples. This is a relatively easy thing to accomplish, it's just that it doesn't seem that you did enough research. Edited: added December...

$("#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" />

score 0 · Answer 2 · answered Oct 25 '18 at 14:52

This is a quick and dirty way of doing it using JavaScript. Using Names not IDs.

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

    chk[11].click();

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

Checking/Unchecking check box array with jQuery

2 Answers2