Javascript: 如何检查每个输入值是否与其他输入值重复

Question

我有一个动态输入字段，它来自于不同的类名和名称，我想检查每个输入字段的值是否已存在或重复。

这会像这样：

第一个criteria_name是默认的，其他的都是添加的。

<input type="text" name="criteria_name" class="criteria_name">
<input type="text" name="criteria_name2" class="criteria_name2">
<input type="text" name="criteria_name3" class="criteria_name3">
<input type="text" name="criteria_name4" class="criteria_name4">
<input type="text" name="criteria_name5" class="criteria_name5">

我正在尝试检查每个，如果没有重复项，就继续进行。

 var critname_arr = [];
 var input_check;
 var crit_name_of_first = $('input.criteriaNames').val();
 var acappended = append_crit_header+1;
 var count_to = 0;

 for(var ab = 2; ab<=acappended; ab++){
      var crit_arr;

    if(crit_name_of_first == $('input.criteria_each_name'+ab+'').val()){
        alert("Criteria cannot be duplicate");
        return false;
    }else{

        input_check = $('input.criteria_each_name'+ab);
        input_check.each(function(){
            crit_arr = $.trim($(this).val());           
        });
        critname_arr.push(crit_arr);
    }
    if($('input.criteria_each_name'+ab+'').val() == critname_arr[count_to]){
            alert('criteria cannot be duplicate');
            return false;
    }
    count_to++;
}
console.log(critname_arr);

- Raffy T Lawrence

---

您可以考虑使用类作为选择器，而不是使用id值。这样，您就可以通过类进行选择，并使用$.each来迭代。 - Rasclatt

哦，我忘记了，这是类（class），抱歉。 - Raffy T Lawrence

仍然相同，如果重复，它们不会相互比较。 - Raffy T Lawrence

那么这个 'input#criteria_name' 就不能作为选择器使用。你还需要使用相同的类名 .criteria_name，而不是编号。 - Rasclatt

哦，等一下，我试一下。 - Raffy T Lawrence

Answer 1

这只是一个示例，演示如何实现。在fiddle中将其中一个值更改为已经存在于另一个字段中的值（创建重复值），以查看它的效果。如果没有重复项，则不会执行任何操作。单击“Button”文本以运行重复检查：

jsFiddle：https://jsfiddle.net/o52gjj0u/

<script>
$(document).ready(function(){
    $('.ter').click(function(e) {
        var stored  =   [];
        var inputs  =   $('.criteria_name');
        $.each(inputs,function(k,v){
            var getVal  =   $(v).val();
            if(stored.indexOf(getVal) != -1)
                $(v).fadeOut();
            else
                stored.push($(v).val());
        });
    });
});
</script>
<!-- Just use an array name for the input name and same class name as well -->
<div class="ter">Button</div>
<input type="text" name="criteria_name[]" class="criteria_name" value="1" />
<input type="text" name="criteria_name[]" class="criteria_name" value="2" />
<input type="text" name="criteria_name[]" class="criteria_name" value="3" />
<input type="text" name="criteria_name[]" class="criteria_name" value="4" />
<input type="text" name="criteria_name[]" class="criteria_name" value="5" />

- Rasclatt

---

有趣，我试一下这个。 - Raffy T Lawrence