javascript - 为什么 JQuery (!) 不赋值只返回 false

Question

我正在做一个项目并且有很多 bool 字段。我希望这些字段返回 bool 值(1 或 0)。我不知道这是否是一个令人尴尬的问题，但我不能通过 jQuery 中的非 (!) 赋值来更改输入的值。它适用于 2 次点击，之后它总是返回 false。在第一次点击时，由于隐藏输入的值为空，它返回 true，在第二次点击时，它返回 false 作为 !true=false。之后所有点击它只返回 false。

我的 HTML

<div class="col-md-4">
  <label>Required?</label>
  <input type="checkbox" name="" class="form-control required_field">
  <input type="hidden" name="field_required[]" value="">
</div>

我的 Jquery

$('div').on('click', '.required_field', function() {
  let v = !($(this).siblings('input').val());
  $(this).siblings('input').val(v);
  console.log($(this).siblings('input').val());
});

它适用于三元运算符和 if else，如果我将值比较为:

$('.div').on('click','.required_field',function(){
     $(this).siblings('input').val(($(this).siblings('input').val()==1)?0:1);
     console.log($(this).siblings('input').val());
});

或者

$('.up-field-sec').on('click','.required_field',function(){
        let v = $(this).siblings('input').val();
        $(this).siblings('input').val((!$(this).siblings('input').val() || v==0)?1:0);
        console.log($(this).siblings('input').val());
    });

我觉得很奇怪怎么会是!false = false ??我在这里错过了什么？这让我很烦。如果有人能向我解释这一点，我将非常高兴。提前谢谢你。

这是 Jsfiddle的代码。

Answer 1

问题是因为任何非空字符串都会强制转换为 true，即使它包含单词 "false" 或数字 "0"。因此，!"false" 始终为 false。

要解决此问题，您需要使用 !!。右侧的 ! 将字符串转换为 bool 值，左侧的 ! 运算符反转该结果。

$('div').on('click', '.required_field', function() {
  let v = !!$(this).siblings('input').val();    
  $(this).siblings('input').val(v);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <label>Required?</label>
  <input type="checkbox" name="" class="form-control required_field">
  <input type="hidden" name="field_required[]" value="">
</div>