Question

我在表单中有5个选择输入，为了验证我想确保它们没有相同的值。选择选项相同，但选择应该选择1个单独的选项。这是我目前没有工作的代码

var bk1 = document.getElementById("block1").value;
var bk2 = document.getElementById("block2").value;
var bk3 = document.getElementById("block3").value;
var bk4 = document.getElementById("block4").value;
var bk5 = document.getElementById("block5").value;
var res = true;      
    if(bk1 !=== bk2 && bk1 !=== bk3 && bk1 !=== bk4 && bk1 !=== bk5)
    {
        res = true;
    }else
    {
        res = false;
    }        
    if(bk2!===bk1 && bk2 !===bk3 && bk2!===bk4 && bk2!===bk5)
    {
        res = true;
    }else
    {
        res = false;
    }        
    if(bk3!===bk2 && bk3 !===bk1 && bk3!===bk4 && bk3!===bk5)
    {
        res = true;
    }
    else
    {
        res = false;
    }       
    if(bk4!===bk2 && bk4 !===bk3 && bk4!===bk1 && bk4!===bk5)
    {
        res = true;
    }
    else
    {
        res = false;
    }       
    if(bk5!===bk2 && bk5 !===bk3 && bk5!===bk4 && bk5!===bk1)
    {
        res = true;
    }else
    {
        res = false;
    }     
   if(res === true)
   {
    alert("yes");
    document.block_form.submit();
   }else
   {
      alert("wrong");
      document.getElementById("block_error").value = "Multiple blocks have same selected option";
   }

Answer 1

创建值数组;
检查数组是否有重复值。

例如：

var bk1 = document.getElementById("block1").value;
var bk2 = document.getElementById("block2").value;
var bk3 = document.getElementById("block3").value;
var bk4 = document.getElementById("block4").value;
var bk5 = document.getElementById("block5").value;

var test = [bk1, bk2, bk3, bk4, bk5];
var res = true; 
for(var i = 0; i < test.length; i++) { 
  if (test.indexOf(test[i], i + 1) >= 0) {
    res = false; 
    break;
  } 
}

if(res){
    alert("yes");
    document.block_form.submit();
}else{
  alert("wrong");
  document.getElementById("block_error").value = "Multiple blocks have same selected option";
}

Answer 2

对值数组进行循环听起来更好，但以防万一你想坚持使用自己的方法：

var bk1 = document.getElementById("block1").value;
var bk2 = document.getElementById("block2").value;
var bk3 = document.getElementById("block3").value;
var bk4 = document.getElementById("block4").value;
var bk5 = document.getElementById("block5").value;

var res = true;
if(bk1 == bk2 || bk1 == bk3 || bk1 == bk4 || bk1 == bk5 || 
    bk2 == bk3 || bk2 == bk4 || bk2 == bk5 ||
    bk3 == bk4 || bk3 == bk5 ||
    bk4 == bk5){

    res = false;
}


if(res){
    alert("yes");
    document.block_form.submit();
}else{
  alert("wrong");
  document.getElementById("block_error").value = "Multiple blocks have same selected option";
}

Answer 3

请改用此甜蜜代码。

var arr= [], res=true;
    for(var i=1; i<=5; i++)
    {
        var curVal = document.getElementById("block"+i).value;
        if(arr.indexOf(curVal)!==1) {res=false; break;}
        else arr.push(curVal);
    }


 if(res)
  {
    alert("yes");
    document.block_form.submit();

  }
 else
  {
      alert("wrong");
      document.getElementById("block_error").value = "Multiple blocks have same selected option";
  }

Answer 4

试试这个js小提琴： https://jsfiddle.net/um2ffuqd/

请注意：

if ((bk1 !== bk2 && bk1 !== bk3 && bk1 !== bk4 && bk1 !== bk5) 
&& (bk2 !== bk3 && bk2 !== bk4 && bk2 !== bk5) 
&& (bk3 !== bk4 && bk3 !== bk5) 
&& (bk4 !== bk5)) {
    res = true;

} else {
    res = false;
}

非常混乱，因为这里的许多其他海报都说你真的应该使用循环。尽管如此我尽可能地坚持你的代码。

Answer 5

或功能方式

var bk1 = document.getElementById("block1").value;
var bk2 = document.getElementById("block2").value;
var bk3 = document.getElementById("block3").value;
var bk4 = document.getElementById("block4").value;
var bk5 = document.getElementById("block5").value;

var map = {};

var res = [bk1, bk2, bk3, bk4, bk5].reduce( function (val, e) {
  if (map.hasOwnProperty(e)) {
    return val+1;
  } else {
    map[e] = 1;
    return val;
  }
}, 0);


if (res <= 0) {
  alert("yes");
  document.block_form.submit();
} else {
  alert("wrong");
  document.getElementById("block_error").value = "Multiple blocks have same selected option";
}

如何检查多个html选择是否具有相同的值

5 个答案: