javascript - html，javascript，如何知道复选框何时更改状态

Question

我的目标是展示divX2当x2通过单击 x2 进行检查或点击xt 。这在 x2 时工作正常。单击但在 xt 时不起作用被点击。请注意行 console.log("change x2");在 change x2 的事件处理程序。当我点击xt时, x2看起来已经检查过了，但是 change事件永远不会被触发。

$(function() {
  $("#xt").click(function() {
    var check = $(this).prop("checked");
    $(".mark").prop("checked", check);
  });

  $("#x2").change(function() {
    console.log("change x2");
    if ($(this).prop("checked")) {
      $("#divX2").show();
    } else {
      $("#divX2").hide();
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><span><input name="xt" id="xt" type="checkbox" /> Check All</span></li>
  <li><span><input name="x1" id="x1" type="checkbox" class="mark" /> X1</span></li>
  <li><span><input name="x2" id="x2" type="checkbox" class="mark"/> X2</span></li>
  <li><span><input name="x3" id="x3" type="checkbox" class="mark"/> X3</span></li>
  <li><span><input name="x4" id="x4" type="checkbox" class="mark"/> X4</span></li>
</ul>
<div id="divX2" hidden="hidden">
  <h4>Mostrando X2</h4>
</div>

Answer 1

您只需调用 .change() 即可触发它。

$(".mark").prop("checked", check).change();