jQuery检查<input>是否存在并具有值

70

我有以下示例：

<input type="text" class="input1" value="bla"/>

有没有一种方法可以检查此元素是否存在并且在一个语句中是否有值？或者，至少短于

if($('.input1').length > 0 && $('input1').val() != '')

一英里长的条件使这里感到沮丧。

javascript jquery

— 迪姆斯基
source

如果您多次使用相同的条件，也许可以做一个辅助函数。

— mirrormx

1

if（$（selector）.val（））应该可以工作。如果该元素不存在，它将返回“未定义”，如果存在但没有长度，则将返回“”（其值为假）。

— 本·雅各布斯

@Benmj也会将'undefined'评估为false吗？我以为不会。

— 2013年

@isherwood这不是重复的。我想知道元素是否存在并且同时具有值。

— 2013年

1

@Dimskiy：它不应该if ($('#foobar').val()) { console.log('You will not see this') }

— 本·雅各布斯

143

如果输入不存在，则该输入将没有值。尝试这个...

if($('.input1').val())

— 布赖恩
source

我最终编写了一些小函数，但也使用了此示例。

— Dimskiy

3

@Christian：input1不是上面答案中的html标记，而是一个类。

— ismail baig 2014年

5

我不完全同意信任input元素的value属性。它有时可以为空（其中没有任何值），但仍然存在于范围中。因此，最好的方法是依靠$（'。input1'）。length> 0，然后执行任何处理。

— Code Buster 2015年

2

空字符串评估为false。在控制台中尝试它，if("") { true } else { false }这是正确的答案。

— 塞斯·杰弗里

27

您可以这样做：

if($('.input1').length && $('.input1').val().length)

length值为时false，条件为0。

— t
source

@MarkWalters：这里没有下注，但是与原始版本相比没有太大的改进。

— 系统

我会支持你的。我喜欢在这里添加.length。

— 罗伯特·瓦德尔

@thesystem这个答案与原始答案相比有很大的改进。原始的信任val（），在空字符串上它的评估结果为false，但不是。除此之外，在尝试接受的答案后，它对我来说是失败的，但是库特的答案做到了。

— 我尽力而为，但我哭得更厉害

13

您可以执行以下操作：

jQuery.fn.existsWithValue = function() { 
    return this.length && this.val().length; 
}

if ($(selector).existsWithValue()) {
        // Do something
}

— 97ldave
source

9

只是为了达到目的，我在jQuery代码中进行了跟踪。.val（）函数当前从attributes.js的第165行开始。这是相关的部分，带有我的注释：

val: function( value ) {
    var hooks, ret, isFunction,
        elem = this[0];

        /// NO ARGUMENTS, BECAUSE NOT SETTING VALUE
    if ( !arguments.length ) {

        /// IF NOT DEFINED, THIS BLOCK IS NOT ENTERED. HENCE 'UNDEFINED'
        if ( elem ) {
            hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

            if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                return ret;
            }

            ret = elem.value;

            /// IF IS DEFINED, JQUERY WILL CHECK TYPE AND RETURN APPROPRIATE 'EMPTY' VALUE
            return typeof ret === "string" ?
                // handle most common string cases
                ret.replace(rreturn, "") :
                // handle cases where value is null/undef or number
                ret == null ? "" : ret;
        }

        return;
    }

因此，您将获取undefined或""或null-在if语句中所有这些都评估为false。

— 本·雅各布斯
source

3

您可以创建自己的自定义选择器 :hasValue，然后使用它来查找，过滤或测试任何其他jQuery元素。

jQuery.expr[':'].hasValue = function(el,index,match) {
  return el.value != "";
};

然后，您可以找到这样的元素：

var data = $("form input:hasValue").serialize();

或者使用以下命令测试当前元素 .is()

var elHasValue = $("#name").is(":hasValue");

显示代码段

jQuery.expr[':'].hasValue = function(el) {
  return el.value != "";
};


var data = $("form input:hasValue").serialize();
console.log(data)


var elHasValue = $("[name='LastName']").is(":hasValue");
console.log(elHasValue)

label { display: block; margin-top:10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <label>
    First Name:
    <input type="text" name="FirstName" value="Frida" />
  </label>

  <label>
    Last Name:
    <input type="text" name="LastName" />
  </label>
</form>

展开摘要

进一步阅读：

— 凯尔·米特
source

0

if($('#user_inp').length > 0 && $('#user_inp').val() != '')
{

    $('#user_inp').css({"font-size":"18px"});
    $('#user_line').css({"background-color":"#4cae4c","transition":"0.5s","height":"2px"});
    $('#username').css({"color":"#4cae4c","transition":"0.5s","font-size":"18px"});

}

— 米尔扎·阿尔萨尔·乔杜里
source

-1

我会做这样的事情：$('input[value]').something。这将找到所有有价值的输入并对其进行操作。

— BWP
source