为何jQuery中使用!赋值操作后始终返回false？

这问题本质是你忽略了input的val()返回的是字符串类型，不是布尔值，我给你一步步拆解原代码的执行过程就懂了：

原代码的执行流程 #

你的隐藏input初始值是空字符串""：

1. 第一次点击：!"" → 空字符串在布尔判断里是false，取反后得到true，赋值给隐藏input后，它的value会变成字符串"true"（因为input只能存字符串值）
2. 第二次点击：!"true" → 非空字符串"true"在布尔判断里是true，取反后得到false，赋值后隐藏input的value变成字符串"false"
3. 第三次及之后点击：!"false" → 非空字符串"false"依然是布尔true，取反后还是false，所以之后不管点多少次，结果都是false

这就是为什么你觉得“!false=false”——实际上你取反的不是布尔值false，而是字符串"false"，两者完全不是一回事！

为什么三元/if-else写法能正常工作？ #

你用的两种正确写法，都是直接对字符串值做比较（比如判断是否等于"1"或"0"），没有涉及到字符串转布尔的坑，所以能正确切换0和1。

更优雅的修正方案 #

其实还有更简单的写法，直接利用checkbox自身的checked状态来同步，完全不用依赖隐藏input的初始值：

$('div').on('click', '.required_field', function() {
  // 直接取checkbox的选中状态，转成1或0
  const newValue = $(this).is(':checked') ? 1 : 0;
  $(this).siblings('input').val(newValue);
  console.log(newValue);
});

如果一定要基于隐藏input的值来切换，记得先把字符串转成数字或布尔值再处理：

$('div').on('click', '.required_field', function() {
  const hiddenInput = $(this).siblings('input');
  // 把字符串转成数字，空字符串会变成0
  const currentVal = Number(hiddenInput.val());
  // 0→1，1→0
  const newValue = currentVal ? 0 : 1;
  hiddenInput.val(newValue);
  console.log(newValue);
});

核心总结 #

input的val()永远返回字符串，不要直接用!操作符去处理它的返回值——非空字符串（哪怕是"false"）在布尔上下文里都是true，取反自然就是false。一定要先做类型转换，或者直接比较字符串本身。

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