如何查找所有含特定值的Input元素？JS与jQuery代码无返回结果

你用的input[value="ABC"]这类属性选择器，匹配的是HTML标签上初始定义的value属性，而非输入框当前的实际值。如果输入框内容被用户修改过，或者通过JS动态设置了input.value（而非修改HTML属性），这种选择器就找不到目标元素。

原生JavaScript解决方案 #

先获取所有目标input元素，再通过filter筛选出当前值等于"ABC"的元素：

// 匹配所有input中当前值为"ABC"的元素
const targetInputs = Array.from(document.querySelectorAll('input')).filter(input => input.value === 'ABC');

// 可选：缩小范围，只匹配文本类型的input
const targetTextInputs = Array.from(document.querySelectorAll('input[type="text"]')).filter(input => input.value === 'ABC');

jQuery解决方案 #

使用jQuery的filter()方法，筛选DOM对象的value属性（即当前实际值）：

// 匹配所有input中当前值为"ABC"的元素
const $targetInputs = $('input').filter(function() {
  return this.value === 'ABC';
});

// 可选：箭头函数写法（注意上下文）
const $targetInputs = $('input').filter(() => this.value === 'ABC');

// 可选：缩小范围到文本类型input
const $targetTextInputs = $('input[type="text"]').filter(function() {
  return this.value === 'ABC';
});

如果你的需求确实是匹配HTML标签上的初始value属性，那原来的选择器是正确的，但绝大多数场景下，我们需要匹配的是输入框的当前实际值，这时候就必须用上述筛选方式。

内容的提问来源于stack exchange，提问作者smolo