Question

我正在从事一个项目，并且有很多布尔字段。我希望这些字段返回布尔值（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。

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

$('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>

Answer 2

谢谢大家的帮助，你们真棒！

我做了一些挖掘，这就是我得出的结论：

这是上面代码中令人高兴的事情。每次从HTML元素获取输入值时，它都是一个字符串。第一次单击中的值将是一个空字符串，并且(!'')（就像如果empty为false一样！empty为true）将为true，与!0相同。在第二次单击中，输入的值将为"true"（字符串），而!'true'（值不为空，因此将返回false）为false。到那时，一切看起来都非常完美。此后，其他所有点击将返回false字符串值not(!) operator将返回false，因为该值不为空。

更好地了解

//first click
console.log('first click');
let v = '';
console.log('!v is: '+!v);
console.log('typeof !v is: '+typeof(!v));
console.log(!v);
v = !v;

//second click
console.log('Second click');
v='true';
console.log('!v is: '+!v);
console.log('typeof !v is: '+typeof(!v));
console.log(!v);

//third click
console.log('Third click');
v='false';
console.log('!v is: '+!v);
console.log('typeof !v is: '+typeof(!v));
console.log(!v);

//Fourth click
console.log('Fourth click');
v='false';
console.log('!v is: '+!v);
console.log('typeof !v is: '+typeof(!v));
console.log(!v);

要克服这一点并保留布尔值：

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

我从以下方面获得帮助： How can I convert a string to boolean in JavaScript?

为什么JQuery（！）没有赋值只返回false

2 个答案: