使用jQuery检查值是不是为空[重复]

Posted 2023-02-22

【中文标题】使用jQuery检查值是不是为空[重复]

【英文标题】：Check if values are empty or not with jQuery [duplicate]使用jQuery检查值是否为空[重复]

【发布时间】：2014-09-09 17:05:07

【问题描述】：

我有一个函数，它只工作它的笨重，我知道它可以写得更好，他们是一种结合下面的方法吗？

$('#calculateAll').click(function()        
    if( $('.a').val() === '' ) 
        $('.a').css('border-color','#BE1E2D');
        return false;
     else if( $('.b').val() === '' ) 
        $('.b').css('border-color','#BE1E2D');
        return false;
     else if( $('.c').val() === '' ) 
        $('.c').css('border-color','#BE1E2D');
        return false;
     else if( $('.d').val() === '' ) 
        $('.d').css('border-color','#BE1E2D');
        return false;
     else ...

【参考方案1】：

您可以为此使用 jQuery .each() 函数。

$('.a, .b, .c, .d').each(function() 
  if ($(this).val() == '') 
    $(this).css('border-color','#BE1E2D');
    return false;
  
);

【讨论】：

你应该添加一个 return false; if 中的语句与 Liam 的代码具有相同的效果

你说得对，谢谢。我编辑了答案。

请注意，这不会在$('#calculateAll').click(function() .. ); 函数中返回false，而是在.each(function() .. ); 函数中返回。

【参考方案2】：

看来您正在验证某些内容。与其他答案不同，他们忘记了不仅仅是迭代元素并在为空时给它们一个红色边框。

$('#calculateAll').on('click', function() 

  var err = false;
  // I would recommend using a class for these elements or a better selector
  $('.a, .b, .c, .d').each(function() 
    if ($(this).val() === '') 
      $(this).css('border-color','#BE1E2D');
      err = true;
      // If you don't want to add a border-color to the other elements, return false and break the loop
      return false;
    
  );

  // Was something empty?
  if (err) 
    return false;
  

  // All good, let's continue
  ...

);

【讨论】：

这不会给他与他的代码相同的结果。他的代码在他添加边框的那一刻返回 false ；）请参阅 krisd 答案以了解正确的循环

@Pinoniq 是的。我添加了对迭代的返回和解释，以便他可以选择任何一种方式。

【参考方案3】：

一种可能的更短的方法是执行以下操作：

$('#calculateAll').click(function()         
    var $invalidElements = $(".a, .b, .c, .d")
                           .css('border-color', '')
                           .filter(function()  return $(this).val() === "" ).first()
                           .css('border-color', '#BE1E2D');

    if ($invalidElements.length > 0) 
        return false;
    
    else 
        // code executed when all elements are valid
    
);

我建议删除.first()，以便您可以同时验证所有元素。此外，我添加了.css('border-color', '') 行，以在验证之前清除所有元素的边框颜色。

【参考方案4】：

演示：http://jsfiddle.net/U7t4p/1/

首先使用.filter()找到空输入

$('.container input[type="text"]').filter(function()  
    return this.value === ''; 
)

该方法遍历所有匹配的元素，如果回调返回true，则将当前元素添加到返回的jQuery对象中。

最后我们将 CSS 类应用于这些元素：

.addClass('hl');