javascript - 使用复选框显示/隐藏元素

Question

在我的代码片段中，我想单击单击我以使文本消失，并出现一个复选框并被选中。这部分有效。

我无法工作的是取消选中该复选框应该使该复选框隐藏并且click me文本重新出现，但该复选框根本不会取消选中。

function doStuff() { 
  if ($('#thecb').prop('checked') == true) {
    hideDiv('thecb');
    showDiv('thediv');
  } else {
    hideDiv('thediv');
    showDiv('thecb');
    $('#thecb').prop('checked',true);
  }
}

function showDiv(id) {
  document.getElementById(id).style.display = "block";
}

function hideDiv(id) {
  document.getElementById(id).style.display = "none";
}

.hidden {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="thediv" onclick="doStuff()">click me</div>
<input type="checkbox" id="thecb" onclick="doStuff()" class="hidden">

Answer 1

您将立即使用 $('#thecb').prop('checked',true); 重新选中该复选框。将其放在其他部分中:

function doStuff() { 
  if (!$('#thecb').prop('checked')) {
    hideDiv('thecb');
    showDiv('thediv');
    $('#thecb').prop('checked', true);
  } else {
    hideDiv('thediv');
    showDiv('thecb');
  }
}

function showDiv(id) {
  document.getElementById(id).style.display = "block";
}

function hideDiv(id) {
  document.getElementById(id).style.display = "none";
}

.hidden {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="thediv" onclick="doStuff()">click me</div>
<input type="checkbox" checked id="thecb" onclick="doStuff()" class="hidden">