Question

我有一个HTML表单，其中包含季节复选框和季节按钮集。我希望jQuery在单击按钮时选择复选框。例如，当我单击“冬季”按钮时，应选中“ 12月，1月，2月”复选框。我的代码似乎不起作用。

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

通常，应考虑有关代码中名称和ID的所有注释。避免使用特殊字符，ID必须是唯一的，等等。下面的代码应根据您现有的代码工作。请查找最佳做法和示例。这是相对容易完成的事情，只是似乎您没有进行足够的研究。编辑：添加了十二月...

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

Answer 2

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

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

    chk[11].click();

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

使用jQuery选中/取消选中复选框数组

2 个答案: