Javascript 是否可以同时使用多个for循环？

我想创建一个html表单，它有2个组（名称和水果），每个组有两个复选框，当用户单击输入名称为user_checkbox[]和fruit_checkbox[]的复选框时，它会做一些事情，我需要使用数组和for循环来获取选中了哪一组复选框的用户，但它似乎不允许我使用多重for循环。 我的Html文件

//group1
<input name="user_checkbox[]" type="checkbox" value="Peter" onclick="showinputtext();" >Peter
<input name="user_checkbox[]" type="checkbox" value="Billy" onclick="showinputtext();" >Billy
//group2
<input name="fruit_checkbox[]" type="checkbox" value="Apple" onclick="showinputtext();" >Apple
<input name="fruit_checkbox[]" type="checkbox" value="Banner" onclick="showinputtext();" >Banana

//group1
彼得
比利
//第2组
苹果
香蕉

我的Javascript文件

    function showinputtext() {
    var name = document.getElementsByName("user_checkbox[]");
    var fruit = document.getElementsByName("fruit_checkbox[]");     

      for (var n = 0; n < name.length; n++) && for (var f = 0; f < fruit.length; f++)  { 
    if(name[n].checked && fruit[f].checked){
    dosomething..................
      }
}

函数showinputtext（）{
var name=document.getElementsByName（“用户复选框[]”）；
var fruit=document.getElementsByName（“fruit_复选框[]”）；
for（var n=0；n

---

但这对我不起作用，有什么想法吗？thx

试着把第二个for循环放在第一个for循环中，就像这样

for (var n = 0; n < name.length; n++) {
    for (var f = 0; f < fruit.length; f++)  { 
        if(chboxsEng_single[n].checked && chboxsEng_fruit[f].checked){
            dosomething..................
        }
    }
}

for（var n=0；n

请注意，这将经过

f

的每个值，总共

n

次，这可能是您想要的行为，也可能不是您想要的行为，这在问题中并不清楚。

尝试嵌套循环

function showinputtext(){
var name = document.getElementsByName("user_checkbox[]");
var fruit = document.getElementsByName("fruit_checkbox[]"); 
    for (var i = 0; i < name.length; i++) {
        for (var j = 0; j < fruit.length; j++)  { 
              if(name[i].checked && fruit[j].checked){
                  alert("ok");
              }
         }
    }
};

函数showinputtext（）{
var name=document.getElementsByName（“用户复选框[]”）；
var fruit=document.getElementsByName（“fruit_复选框[]”）；
对于（变量i=0；i

如果使用jquery

试试看：

$（“[type='checkbox']”）。在（“单击”，函数（）{
var name=document.getElementsByName（“用户复选框[]”）；
var fruit=document.getElementsByName（“fruit_复选框[]”）；
对于（变量i=0；i

为什么不使用

forEach

？在这种情况下，它看起来更漂亮，并且做同样的工作：

function showInputText() { 
  var nameCheckboxes = document.getElementsByName("user_checkbox[]"); 
  var fruitCheckboxes = document.getElementsByName("fruit_checkbox[]");

nameCheckboxes.forEach(function(nameCheckbox) {
  fruitCheckboxes.forEach(function(fruitCheckbox) {
    if (nameCheckbox.checked && fruitCheckbox.checked) {
      alert ("ok");
    };
  });
});

我重命名了变量和函数，使其更具可读性

如果采用这种方法，请记住更改

onclick

属性中的函数调用：

// Group 1
<input name="user_checkbox[]" type="checkbox" value="Peter" onclick="showInputText();" >Peter 
<input name="user_checkbox[]" type="checkbox" value="Billy" onclick="showInputText();" >Billy

// Group 2
<input name="fruit_checkbox[]" type="checkbox" value="Apple" onclick="showInputText();" >Apple 
<input name="fruit_checkbox[]" type="checkbox" value="Banner" onclick="showInputText();" >Banana

然后，我将向侦听复选框更改的

水果输入

和

用户输入

元素添加事件侦听器。当发生更改事件时，它会检查输入是否已被选中，然后它将添加或从

selectedFruits

或

selectedUsers

数组中删除：

document.getElementsByClassName("fruit-input")
  .forEach(function(input){ 
    input.addEventListener("change", selectFruit);
});

document.getElementsByClassName("user-input")
  .forEach(function(input){
    input.addEventListener("change", selectUser);
});

var selectedFruits = [];
var selectedUsers = [];

function selectFruit() {
    var fruit = this.getAttribute("name");

    if (this.checked) {
      selectedFuits.push(fruit);
    } else {
      selectedFruits.remove(fruit);
    }
}

function selectUser() {
    var user = this.getAttribute("name");

    if (this.checked) {
      selectedUsers.push(user);
    } else {
      selectedUsers.remove(user);
    }
}

注意函数是如何从输入元素的name属性获取要添加到数组中的值的。您当前的name属性无效，因为它们实际上应该是唯一的

甚至可以重构我上面的建议，使用一个通用输入字段侦听器，并根据数据属性或其他内容确定要添加到的数组，但这是一个很好的起点

---

这之后，您可以按照<代码> >选择的水果>代码>或>代码>选择用户数组。

您需要嵌套<代码> 循环。对此有很多示例。您可以考虑使用选择器：<代码>文档。。名字和水果的长度相同吗？@Francolung-我刚刚更新了我的答案，给你几个选择！

<input type="checkbox" name="peter" class="user-input">
<input type="checkbox" name="banana" class="fruit-input">

document.getElementsByClassName("fruit-input")
  .forEach(function(input){ 
    input.addEventListener("change", selectFruit);
});

document.getElementsByClassName("user-input")
  .forEach(function(input){
    input.addEventListener("change", selectUser);
});

var selectedFruits = [];
var selectedUsers = [];

function selectFruit() {
    var fruit = this.getAttribute("name");

    if (this.checked) {
      selectedFuits.push(fruit);
    } else {
      selectedFruits.remove(fruit);
    }
}

function selectUser() {
    var user = this.getAttribute("name");

    if (this.checked) {
      selectedUsers.push(user);
    } else {
      selectedUsers.remove(user);
    }
}