使用 jQuery 检查/取消选中复选框数组答案

【问题标题】：Checking/Unchecking check box array with jQuery使用 jQuery 检查/取消选中复选框数组
【发布时间】：2019-03-30 05:28:30
【问题描述】：

我有一个带有季节复选框和一组季节按钮的 HTML 表单。我希望 jQuery 在单击按钮时选中复选框。例如，当我单击 Winter 按钮时，它应该检查 Dec、Jan、Feb 复选框。不知何故，我的代码似乎不起作用。

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

【问题讨论】：

[] 是选择器的特殊字符，用于属性选择。如果你想在 id 中使用它，你必须用 `\\` 转义它们
ID 必须是唯一的
但是，您正在重复 id，这在 Web 标准中是无效的语法。 stackoverflow.com/questions/9454645/…
你打算winter[0] 是什么？您似乎正在尝试在元素选择器中使用数组语法。
我的错，有复制粘贴姓名和ID的习惯

标签： javascript jquery checkbox

【解决方案1】：

一般而言，应考虑代码中有关名称和 ID 的所有 cmets。避免特殊字符，ID 必须是唯一的，等等......下面的代码应该基于您现有的代码。请寻找最佳实践和示例。这是一件相对容易完成的事情，只是你似乎没有做足够的研究。已编辑：添加 12 月...

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

【讨论】：

【解决方案2】：

这是一种使用 JavaScript 的快速而肮脏的方式。使用名称而不是 ID。

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

    chk[11].click();

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

【讨论】：