复选框控制元素显隐问题：点击后复选框无法取消勾选

嘿，我看出来问题出在哪了——你的doStuff函数里有个关键逻辑错误，直接把复选框锁死在勾选状态了！咱们一步步理清楚：

问题根源 #

你的else分支里写了$('#thecb').prop('checked',true)，这意味着无论什么时候进入else分支，都会强制把复选框设为勾选状态。而且你的逻辑判断也搞反了：当用户点击复选框试图取消勾选时，函数反而把它又勾回去了，自然没法取消。

另外，你的函数没有区分“点击文本”和“复选框状态变化”这两个不同的触发场景，逻辑混在一起就容易出问题。

修正后的完整实现 #

先看HTML结构（假设你的结构是这样的，可根据实际情况调整ID）：

<div id="thediv">click me</div>
<input type="checkbox" id="thecb" style="display:none;">

然后是修正后的JavaScript代码（沿用你原代码的jQuery风格）：

// 隐藏元素的工具函数
function hideDiv(id) {
  document.getElementById(id).style.display = 'none';
}

// 显示元素的工具函数
function showDiv(id) {
  document.getElementById(id).style.display = 'block';
}

// 点击"click me"文本的逻辑
$('#thediv').on('click', function() {
  hideDiv('thediv');
  showDiv('thecb');
  // 显示复选框时默认设为勾选状态
  $('#thecb').prop('checked', true);
});

// 复选框状态变化的逻辑
$('#thecb').on('change', function() {
  if (!$(this).prop('checked')) {
    // 取消勾选时，隐藏复选框，重新显示文本
    hideDiv('thecb');
    showDiv('thediv');
  }
  // 勾选状态下无需额外操作，保持复选框显示即可
});

关键改动说明 #

1. 拆分触发逻辑：把“点击文本”和“复选框状态变化”分成两个独立的事件处理函数，逻辑更清晰，不会互相干扰。
2. 移除强制勾选的错误代码：删掉了原代码里else分支的$('#thecb').prop('checked',true)，让复选框的状态完全由用户操作决定。
3. 使用change事件处理复选框：相比click事件，change事件更适合处理复选框的状态变化，能准确捕捉到勾选/取消勾选的动作。

这样调整后，就能完美实现你要的效果：点击文本切换到勾选的复选框，取消复选框的勾选就切回“click me”文本。

内容的提问来源于stack exchange，提问作者Daniel Williams