jQuery 检查 <input> 是否存在并且有值答案

【问题标题】：jQuery check if <input> exists and has a valuejQuery 检查 <input> 是否存在并且有值
【发布时间】：2013-03-18 16:11:41
【问题描述】：

我有以下例子：

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

有没有办法检查这个元素是否存在并在一个语句中具有值？或者，至少，任何更短的时间

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

只是因为一英里长的条件而感到沮丧。

【问题讨论】：

如果你多次使用同一种条件，也许可以做一个辅助函数。
if($(selector).val()) 应该可以工作。如果元素不存在，它将返回“未定义”，如果存在但没有长度，则返回“”（评估为假）。
@Benmj 'undefined' 也会评估为 false 吗？我以为不会。
@isherwood 这不是重复的。我想知道元素是否存在并且同时有一个值。
@Dimskiy : 它不应该是if ($('#foobar').val()) { console.log('You will not see this') }

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

我最后写了几个小函数，但也用了这个例子。
@Christian: input1 不是上述答案中的 html 标签，而是一个类。
我不完全同意信任输入元素的 value 属性。它有时可以为空（其中没有值），但仍存在于范围内。所以最好是依靠 $('.input1').length > 0 再做任何处理。
空字符串评估为假。在控制台试一下if("") { true } else { false } 所以这是正确答案。

【解决方案2】：

你可以这样做：

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

length 在一个条件中计算为false，当值为0。

【讨论】：

@MarkWalters：这里没有反对意见，但与原始版本相比并没有太大改进。
我会支持你 Curt。添加 .length 是我的偏好。
@thesystem 这个答案与原始答案相比有了很大的改进。原始信任 val()，它将在空字符串上评估为 false，而这不会。除此之外，在尝试接受的答案时，它对我来说失败了，但 Curt 他的答案做到了。

【解决方案3】：

你可以这样做：

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

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

【讨论】：

【解决方案4】：

只是为了它，我在 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。

【讨论】：

【解决方案5】：

您可以创建自己的自定义选择器 :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>

进一步阅读：

【讨论】：

【解决方案6】：

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"});

}

【讨论】：

【解决方案7】：

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

【讨论】：