當 checkbox == true 時 Javascript 增加 [i]

Question

我想從僅選中的復選框中為 div 提供 ID。 例如，我有 5 個復選框，每次未選中復選框時，循環都應將所有即將選中的復選框增加 1。

 function saveData() { for (let i = 0; i <= 4; i++) { document.getElementsByClassName('cb')[i].id = 'id' +i; let id_active = document.getElementById('id' + i); if (id_active.checked === true) { let div_id = document.getElementsByClassName('div')[i].id = 'div' + i; document.getElementsByClassName('div')[i].innerText = div_id; } if (id_active.checked === false) { i += 1; } } }

 <input type="checkbox" class="cb" checked> <input type="checkbox" class="cb" checked> <input type="checkbox" class="cb"> <input type="checkbox" class="cb" checked=""> <input type="checkbox" class="cb"> <br> <br> <button onclick="saveData()">Check</button> <div class="div"></div> <div class="div"></div> <div class="div"></div>

所以在這種情況下，第三個 div 應該得到 id="4" 但循環在未選中復選框后停止。 如何為所有即將到來的 [i] 增加 i + 1 並且在第一個checkbox.checked === false之后不停止循環？ 結果應如下所示：

Answer 1

這是我認為你想要的結果。 你需要第二個計數器。

function saveData() {
        let j=0;
        for (let i = 0; i <= 4; i++) {
            console.log(i);
            document.getElementsByClassName('cb')[i].id = 'cb'+ i;
            let id_active = document.getElementById('cb' + i);
            if (id_active.checked === true) {
                let div_id = document.getElementsByClassName('cb')[i].id;
                console.log(div_id);
                document.getElementsByClassName('div')[j].innerText = div_id;
                j+=1;
                
            }
        }
    }    

Answer 2

@SaymoinSam 你能給我舉個例子，我需要什么額外的變量？

我的意思是這樣的，請注意我已經將您的代碼重構為更好更干凈的代碼

 function saveData() { let divs = document.querySelectorAll(".div"), index = 0; document.querySelectorAll(".cb").forEach(function(input, ind) { if(input.checked) { divs[index].id = divs[index++].innerText = `div${ind}`; } }); }

 <input type="checkbox" class="cb" checked> <input type="checkbox" class="cb" checked> <input type="checkbox" class="cb"> <input type="checkbox" class="cb" checked=""> <input type="checkbox" class="cb"> <br> <br> <button onclick="saveData()">Check</button> <div class="div"></div> <div class="div"></div> <div class="div"></div>

Answer 3

 function saveData() { let divs = $('.div'); let checkboxes = $('.cb'); let j = 0; $(divs).removeAttr('id',""); $(checkboxes).each(function(i){ if($(this).is(':checked') && $(divs).get(j)){ $(divs[j]).attr('id','div'+i); j++; } }); $(divs).each(function(i){ $(this).text('div' + i + ' has id: ' + $(this).attr('id')); }); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <input type="checkbox" class="cb" checked> <input type="checkbox" class="cb" checked> <input type="checkbox" class="cb"> <input type="checkbox" class="cb" checked=""> <input type="checkbox" class="cb"> <br> <br> <button onclick="saveData()">Check</button> <div class="div"></div> <div class="div"></div> <div class="div"></div>