Question

我想创建一个html表单，它有2个组（Name和fruit），每个组有两个复选框，当用户点击输入名称为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

我的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..................
      }
}

但它对我不起作用，任何想法？ THX

Answer 1

尝试嵌套for循环。

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");
              }
         }
    }
};

如果你使用jquery

尝试一下： Example

$("[type='checkbox']").on("click",function(){
    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");
              }
         }
    }
});

Answer 2

为什么不使用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

但是，阅读您的帖子，您可能根本不需要这样做。似乎没有必要在嵌套循环中遍历两个组。为什么不在表单提交时将每个项目添加到数组中并将两者都添加到“Do stuff”中？

我会将您的复选框更改为fruit-input和user-input类：

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

然后我会向fruit-input和user-input元素添加一个事件监听器，用于监听复选框的更改。当发生更改事件时，它会检查输入是否已被选中，然后它将从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);
    }
}

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

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

毕竟，您可以使用selectedFruits或selectedUsers数组执行任何操作。

Answer 3

尝试将第二个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..................
        }
    }
}

请注意，这将会f总共n次的每一个值，这可能是也可能不是您想要的行为，但在问题中并不清楚

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

3 个答案: