Question

如何使用jQuery比较多个输入字段值以及是否存在匹配警报“有类似的值”？

<input value="111"> //similar
<input value="222">
<input value="111"> //similar
<input value="333">

上面的这个html代码应警告'有相似的值'，因为它有2个相同的值。如何用jQuery完成？

我的尝试（以下代码不起作用）：

DEMO： http://jsfiddle.net/HpWLQ/

$('input').each(function () {
    var $this = $(this);
    var val = $this.val();
    vals.push(val);
});
for (var i = 0; i < vals.length; i++) {
    for (var n = 0; n < vals.length; n++) {
        if (n !== i) {
            if (vals[i] === vals[n]) {
                alert('There are similar values');
            }
        }
    }
}

Answer 1

编辑：为了满足@Raynos，这是一个纯粹的JS解决方案。

var vals = {};
var flag = false;
var collection = document.getElementsByTagName('input');
collection = [].slice.call(collection);

collection.forEach(function(element, index, array) {
    if (flag === true) return;
    var i = element.value;
    if (vals[i])
    {
        flag = true;
        alert('There are duplicates!');
    }
    else
    { 
        vals[i] = 1;
    }
});

奖金：我通过jsperf运行我的解决方案;最后一个是obviously by far the fastest。

编辑：以下是解决问题的 jQuery方式 （Working fiddle here）。我的原始答案仍在下面。

var duplicatefound = false;
$('input').each(function(index, item){
    if (duplicatefound) return;
    val = $(item).val();
    if ($('input[value="' + val + '"]').length == 1) return;
    duplicatefound = true;
    alert('There are similar values');
});

替代解决方案，以防您需要捕获部分或全部重复值（Working fiddle here）：

var collection = $('input');
var duplicates = $.map(collection, function(item){
    val = $(item).val();
    return ($('input[value="' + val + '"]').length > 1) ? val : null;
});

if(duplicates.length > 0) alert('There are similar values');

正如其他人所提到的，你错过了vals作为数组的声明，因此，.push()失败了。

您可能会发现基于对象的解决方案更优雅： Working fiddle

var vals = {};

$('input').each(function() {
    var index = $(this).val();
    if (vals[index])
    {
        vals[index]++
    }
    else
    { 
        vals[index] = 1;
    }
});

var duplicates = $.map(vals, function(val, key){
    return (val > 1) ? key : null;
});

if (duplicates.length > 0) alert('There are duplicates!');

Answer 2

您尚未将vals定义为数组。您可以将其定义为

vals = [];

Demo

Answer 3

EDITED 2:    

function findDuplicates()
{
    var dupCount = 0;
    $('input').each(function () {
         var $currentInput = $(this);
         $('input').each(function () {
              if($(this).val() == $currentInput.val() && $(this) != $currentInput)
                   dupCount++;
         });
     });
     if(dupCount > 0) alert("There are " + dupCount + "duplicates!");
}

Answer 4

var inputs = $("input"), similar = [], i, j;

for (i = 0; i < inputs.length; i += 1) {
    for (j = i + 1; j < inputs.length; j += 1) {
        if (inputs[i].value === inputs[j].value) {
            similar.push([i,j]);
        }
    }
}

if (similar.length > 0) {
    alert('There are similar values');
}

请注意，这只是按顺序比较唯一的排列，并且它会为您提供类似数组中匹配索引的数组，以防您对此感兴趣。

示例： http://jsfiddle.net/sjCGy/

您可以使用document.getElementsByTagName而不是jQuery选择器轻松删除jQuery依赖项。

由于@Raynos无法阅读，我会明确表示。

var inputs = document.getElementsByTagName("input"), similar = [], i, j;

for (i = 0; i < inputs.length; i += 1) {
    for (j = i + 1; j < inputs.length; j += 1) {
        if (inputs[i].value === inputs[j].value) {
            similar.push([i,j]);
        }
    }
}

if (similar.length > 0) {
    alert('There are similar values');
}

Answer 5

您的代码有效，您只是错过了vals数组的声明 - See updated fiddle

将多个字段值进行比较

5 个答案:

Demo