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

Question

我想创建一个 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

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

但这对我不起作用，知道吗？？谢谢

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