Checkbox与JS联动异常：checked属性无法切换

嘿，我来帮你拆解下这个问题～你的代码里显示/隐藏、高度调整都正常，但Checkbox的勾选状态没变化，核心原因和jQuery的版本兼容性以及过时的API用法有关，具体分析如下：

问题根源 #

1. jQuery toggle() 方法的API变更
   你用的是旧版jQuery（1.8及更早）的toggle()用法——绑定两个交替触发的回调函数，但从jQuery 1.9版本开始，toggle()被彻底重写了，现在它只能用来切换元素的显示/隐藏状态，不再支持绑定多个回调逻辑。这就导致你代码里设置checked = true/false的部分根本没有按预期执行，自然看不到Checkbox状态变化。

2. 选择器的小疏漏
   你代码里的$("couponInputs")少了类选择器的.，正确写法应该是$(".couponInputs")——不过你说显示隐藏功能正常，可能是实际代码里已经修正，或者是笔误，但这个点还是要注意，避免后续出问题。

3. DOM操作的严谨性问题
   用document.getElementById()直接操作checked属性虽然可行，但结合jQuery的事件体系，用prop()方法来操作Checkbox的状态会更稳定，也更符合jQuery的编码习惯。

修复方案 #

我们需要把过时的toggle()双回调用法替换成标准的事件监听，这里提供两种靠谱的写法：

写法1：监听Checkbox的change事件（推荐） #

因为Checkbox的状态变化用change事件监听最贴合场景，代码逻辑也更清晰：

$("#showCoupon").on("change", function() {
  // 获取当前Checkbox的勾选状态
  const isChecked = $(this).prop("checked");
  
  // 根据状态切换元素显示/隐藏和高度
  $(".couponInputs").toggle(isChecked);
  $("#cart-page #cart-coupon").height(isChecked ? 135 : 50);
});

写法2：如果是通过其他元素触发（比如你的Checkbox是隐藏的，点击父元素触发） #

如果你的Checkbox是display:none，实际是点击其他区域触发逻辑，那可以给父元素绑定click事件，同步Checkbox的状态：

$("#couponField").on("click", function() {
  const $checkbox = $("#showCoupon");
  // 手动切换Checkbox状态
  const newState = !$checkbox.prop("checked");
  $checkbox.prop("checked", newState);
  
  // 执行显示/隐藏和高度调整
  $(".couponInputs").toggle(newState);
  $("#cart-page #cart-coupon").height(newState ? 135 : 50);
});

额外提示 #

• 尽量避免混用原生DOM操作和jQuery方法，保持代码风格统一，减少潜在冲突
• 如果你不确定jQuery版本，可以通过console.log(jQuery.fn.jquery)在浏览器控制台查看版本号

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