Question

有点难过...我有3个复选框和3个Bootstrap 4个进度条。进度条代表不同的指标，即。 progressOne =力量，progressTwo =速度，progressThree =大小。选中每个复选框后，它们会通过改变值从20个中增加每个指标，并且是单独的或累加的（即，选中了checkboxOne时，如果我也选中checkboxThree，它将在“ Power”值上添加“ 5” ，则会添加一个额外的“ 40”。

到目前为止，我在复选框值中生成的多个值之间用空格隔开，即

<input type="checkbox" id="checkboxOne" value="5 15 35" />
<input type="checkbox" id="checkboxTwo" value="0 25 0" />
<input type="checkbox" id="checkboxThree" value="40 0 20" />

我也有它，以便在选中这些复选框时，它将动态更改第一个进度栏。每个栏的HTML如下，其中ID有所更改。

<div class="progress">
  <div id="progressOne" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
</div>

根据技术上的理解，我无法定位复选框值中包含的第二个或第三个值。我想做的是分割“ item.value”，以便我可以定位值[2]或[3]。

   //Bar 1
    var total = 0;
    function comProd(item){
        if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        var progSuccess = document.getElementById('progressOne');
        var totalVal = total + " ";
            progSuccess.setAttribute('aria-valuenow', totalVal);
            progSuccess.style.width = (total + 20) + "%";
    }

当我尝试以下操作时，它仅针对单个整数

  //Bar 1
    var total = 0;
    function comProd(item){
        if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        var progSuccess = document.getElementById('progressOne');
        var totalVal = total + " ";
            progSuccess.setAttribute('aria-valuenow', totalVal);
            progSuccess.style.width = (total + 20) + "%";
    }   
    //Bar 2
    var totaltwo = 0;
    function comProdtwo(item){
        if(item.checked){
           totaltwo+= parseInt(item.value[2]);
        }else{
           totaltwo-= parseInt(item.value[2]);
        }
        var progSuccessTwo = document.getElementById('progressTwo');
        var totalValTwo = totaltwo + " ";
            progSuccessTwo.setAttribute('aria-valuenow', totalValTwo);
            progSuccessTwo.style.width = (totaltwo + 20) + "%";
    }       
    //Bar 3
    var totalthree = 0;
    function comProdthree(item){
        if(item.checked){
           totalthree+= parseInt(item.value[3]);
        }else{
           totalthree-= parseInt(item.value[3]);
        }
        var progSuccessThree = document.getElementById('progressThree');
        var totalValThree = totalthree + " ";
            progSuccessThree.setAttribute('aria-valuenow', totalValThree);
            progSuccessThree.style.width = (totalthree + 20) + "%";
    }

我很惊讶，我无法在网上找到解决方案，但希望能找到任何方向。

JS Fiddle Here

多个进度条通过具有多个值的复选框动态更改

0 个答案: