Javascript 选中/取消选中复选框时更新进度条上的宽度 我想做什么

每次选中或取消选中列表中的复选框时，将进度条增加或减少一个值百分比

例如，如果列表中有两个复选框，则选中/取消选中复选框时，该条应增加或减少50%。如果有4个复选框，则为25%，以此类推

什么起作用了 我可以通过ok设置条需要增加/减少的百分比。我可以在第一次选中复选框时获得将宽度更改为50%的进度

什么不起作用： 我不知道如何通过每次的

checklistProgressInterval

百分比来增加/减少进度。例如，如果该值为50%，则每次选中复选框时进度应增加50%，而未选中复选框时进度应减少50%

我可以让它增加到50%，但不能增加50%。每次检查后，+=似乎只会增加1%

谁能帮我解决我做错了什么？谢谢

let checklistItems = document.querySelectorAll('.list--checklist__item'),
    checklistProgressBar = document.querySelector('.progress-bar--checklist .progress-indicator'),
    checklistLen = checklistItems.length,
    checklistProgressInterval = 100 / checklistLen;

checklistItems.forEach((checklistItem) => {
    let checklistInput = checklistItem.querySelector('.input--checklist__input'),
        checklistContainer = checklistItem.querySelector('.input--checklist__container'),
        checklistText = checklistItem.querySelector('.list--checklist__item--text');
    checklistContainer.addEventListener('click', () => {
        if (checklistInput.checked == true) {
            checklistItem.classList.add('finished');
            checklistProgressBar.style.width += `${checklistProgressInterval}%`;
        } else {
            checklistItem.classList.remove('finished');
            checklistProgressBar.style.width -= `${checklistProgressInterval}%`;
        }
    })
});

---

我猜你做错了

另外，您不能为样式添加宽度，因为您使用的是字符串。 您需要事先计算并分配一个变量

还要确保进度条父项的宽度为100px

检查此示例：

因此，在这里添加一个变量，而不是0%和50%，并在分配它之前计算%

函数checkMe（）{
const checkbox=document.querySelectorAll（“.myCheckBox”）；
const progress=document.querySelector（“.progress内部”）；
const checklistProgressInterval=100/复选框.length；
设宽度=0；
for（设i=0；i

。进度{
宽度：150px；
高度：20px；
背景色：#333；
边框：1px纯黑；
}
.内部进展{
背景色：#f7f；
宽度：0%；
身高：100%；
}

---

我猜你做错了

另外，您不能为样式添加宽度，因为您使用的是字符串。 您需要事先计算并分配一个变量

还要确保进度条父项的宽度为100px

检查此示例：

因此，在这里添加一个变量，而不是0%和50%，并在分配它之前计算%

函数checkMe（）{
const checkbox=document.querySelectorAll（“.myCheckBox”）；
const progress=document.querySelector（“.progress内部”）；
const checklistProgressInterval=100/复选框.length；
设宽度=0；
for（设i=0；i

。进度{
宽度：150px；
高度：20px；
背景色：#333；
边框：1px纯黑；
}
.内部进展{
背景色：#f7f；
宽度：0%；
身高：100%；
}

确保进度条父项的宽度以像素或其他单位为单位。进度条的样式都很好，可以正常工作。这是我一直在努力解决的问题。请确保进度条父项的宽度以像素或其他单位为单位。进度条的样式都很好，可以正常工作。这是我一直在努力解决的问题，因为如果有多个复选框，那么进度宽度将不会超过50%或变量指定的任何值。而我需要它做的是每次选中/取消选中复选框时增加或减少50%。我编辑了我的评论，以便更清楚地说明我在做什么。我明白，您只需计算宽度并将其分配给一个变量，然后将该变量分配给style.width<代码>let width=parseInt（element.style.width，10）解析它以读取当前值，然后递增、递减，最后赋值。如果您制作一个工作代码段，这样我们就可以看到问题了。@mckeever02我已经更新了我的答案，我认为它符合你的要求。这不会起作用，因为如果有多个复选框，那么进度宽度不会超过50%或变量指定的任何值。而我需要它做的是每次选中/取消选中复选框时增加或减少50%。我编辑了我的评论，以便更清楚地说明我在做什么。我明白，您只需计算宽度并将其分配给一个变量，然后将该变量分配给style.width<代码>let width=parseInt（element.style.width，10）解析它以读取当前值，然后递增、递减，最后赋值。如果您制作一个工作代码段，这样我们就可以看到问题，这将使事情变得更容易。@mckeever02我已经更新了我的答案，我想它会满足您的要求。