是否可以同時使用多個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.................. 
     } 
} 

，但它不是爲我工作，任何想法？ 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

嘗試將第二次爲第一個內循環，像這樣

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倍，這可能是也可能不是行爲你的願望，這個問題並不清楚。

Answer 3

爲什麼不使用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 

然而，讀您的文章，你可能不需要這麼做的。似乎沒有必要在嵌套循環中遍歷兩個組。爲什麼不把每個項目添加到數組中，並在提交表單時將兩個項目都添加到「做什麼」？

我會改變你的複選框有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); 
    } 
} 

通知的功能如何抓住值添加到來自輸入元素的name屬性的數組。您的當前名稱屬性無效，因爲它們應該是唯一的。

甚至有可能重構我的建議上面有一個通用的輸入字段監聽器，並根據數據屬性或其他確定要添加到的數組。但這是一個很好的起點。

畢竟，您可以使用selectedFruits或selectedUsers陣列完成您所需的任何操作。