jquery - 通过单击正文上的任意位置来取消选中复选框，并通过单击其标签来切换它

Question

因此，我们有一个复选框和一个与之关联的标签。我需要通过单击标签来切换复选框状态，如果单击正文上的其他任何位置，则取消选中它。下面代码的问题是无法通过单击标签来取消选中该复选框。

$(function () {
  "use strict";
  
  function uncheckBox() {
    var isChecked = $("#cbox").prop("checked");
    if (isChecked) {
      $("#cbox").prop("checked", false);
    }
  }
  
  $("body").on("click", function () {
    uncheckBox();
  });
  
  $("#cbox").on("click", function (e) {
    e.stopPropagation();
  });
});

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" id="cbox" value="checkbox"/>
<label for="cbox">testbox</label>

Answer 1

停止标签中发生的事件冒泡，$("#cbox,label").click

$(function () {
  "use strict";
  
  function uncheckBox() {
    var isChecked = $("#cbox").prop("checked");
    if (isChecked) {
      $("#cbox").prop("checked", false);
    }
  }
  
  $("body").on("click", function () {
    uncheckBox();
  });
  
  $("#cbox,label").on("click", function (e) {
    e.stopPropagation();
  });
});

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" id="cbox" value="checkbox"/>
<label for="cbox">testbox</label>