javascript - 当复选框 == 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？结果应如下所示：

标签： javascriptjquery

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