Question

因此，从本质上讲，我想做的是抓取所有带有name =“ chkOptions”的复选框，循环遍历它们，然后查看“ toppingCodes”数组中是否有任何与之匹配的值。在HTML复选框中分配的值。

到目前为止，对于我的JS，我已经遍历了所有复选框，但是我对如何查看赋予复选框输入的任何值是否与“ toppingCodes”数组中的任何值感到困惑。

const checkboxes = document.getElementsByName("chkOptions");
let toppingCodes = ["XCHE", "XSCE", "OLIV", "ANCH"];
//Loop through check boxes
for (let i = 0; i < checkboxes.length; i++) {
    //Search for checkbox value in toppingCodes
}

<div>
  <div>Options:</div>
    <div>
      <label>
        <input type="checkbox" name="chkOptions" id="chkExtraCheese"  value="XCHE">Extra Cheese
      </label>
      <label>
        <input type="checkbox" name="chkOptions" id="chkExtraSauce" value="XSCE">Extra Sauce
      </label>
      <label>
        <input type="checkbox" name="chkOptions" id="chkOlives" value="OLIV">Olives
      </label>
      <label>
        <input type="checkbox" name="chkOptions" id="chkAnchovies" value="ANCH">Anchovies
      </label>
  </div>
</div>

Answer 1

基本解决方案：遍历数组并比较值。

for (let i = 0; i < checkboxes.length; i++) {
  for (let j = 0; j < toppingCodes; j++) {
    if (checkboxes[i].value === toppingCodes[j]) {
      // Yay, it matches
      break; // No reason to keep looping over `toppingCodes`
    }
  }
}

使用内置方法：

for (let i = 0; i < checkboxes.length; i++) {
  if (toppingCodes.indexOf(checkboxes[i].value) >= 0) {
    // Yay, it matches
  }
}

Answer 2

正如上面其他人提到的那样，您正在寻找Array.indexOf。如果返回的值大于-1，则为true。

我在这里为您制作了一个JSFiddle，以进一步说明：https://jsfiddle.net/mhrgfwL1/5/

const checkboxes = document.getElementsByName("chkOptions");
let toppingCodes = ["XCHE", "XSCE", "OLIV", "ANCH"];
let elems = document.querySelectorAll('input');

const isInArray = function(val) {
    return toppingCodes.indexOf(val) > -1;
};

[].forEach.call(elems, function(el) {
  el.onchange = function(e) {
    if (el.checked) {
        if (isInArray(el.value)) alert(`${el.value} is in the array!`)
    }
  }
});

我希望这会有所帮助。

Answer 3

您可以使用Array.prototype.filter功能此函数将过滤器应用于特定数组，因此，如果要检查复选框值是否在toppingCodes数组内，则可以执行以下操作：

var ocurrences = checkboxes.filter(function(checkbox){
     return toppingCodes.indexOf(checkbox.value) > -1;
});
if(ocurrences > 0)
{
     //the value is inside toppingCodes array
}

获取复选框值并检查它们是否在数组中

3 个答案: