How to divide an SVG circle, depending of an external input?

I have a progress ring where if I have 5 checkboxes to click, so the conditions I created in JS are involving this number 5, as you can see the in the var percent the number 20 was calculated by me cause I knew I had 5 checkboxes.

//There are 5 checkboxes to interact with, so 100/5=20.
    var percent = (checked) * 20;

    myProgress.style.strokeDashoffset = 100 - percent;

Now I'm trying to do something similar, but this time the number of checkboxes to fill is unknown, it'll depend of the number of checkboxes that the user wants. So I decided to update my logic to something like this:

function update() {

var myProgress = document.getElementById("myProgress");
//Reference the Form.
var toDo = document.getElementById("toDo");

//Reference all the CheckBoxes in Table.
boxes = toDo.querySelectorAll("input[type='checkbox']:checked");
checked = boxes.length

//Since in this case I don't know the number of checkboxes, I can't simply add the number 20, so I thought I could get that "20" by doing the following division.

var division= [(100/checked.toFixed(4))];
console.log("this is division:"+ division);

//and then with this division variable, replace the 20 from the previous code. But here is where I have the main problem, because as result of every click I do in a checkbox the var percent always get 100 and as result the ring is already fully colored.
var percent = (checked) * (division);
console.log("this is the percent:"+percent);

myProgress.style.strokeDashoffset = 100 - percent;
if (checked === 5) {
    myProgress.style.stroke= "#1DEBA1";
}else if(checked < 5){
    myProgress.style.stroke= "purple"
}
return true;
}
checks = document.querySelectorAll("input[type='checkbox']");
checks.forEach(function(box) {
box.addEventListener("change", function() {
    update()
});
});

#myCircle {
  width: 0;
  height: 30px;
  stroke: #A3BBAD;
  stroke-width: 3px;
}

#myProgress {
  margin: auto;
  width: 50%;
  stroke: #357266;
  stroke-width: 3px;
}

<svg height="100" width="100">
  <circle id="myProgress" cx="50" cy="50" r="40" fill="transparent"/>
  <circle id="myCircle" cx="50" cy="50" r="40" fill="transparent"/>
</svg>
<br>

<form id="toDo">
  <input id="FirstToDo" type="checkbox" value="1" /><label for="FirstToDo">First</label>
  <input id="SecondToDo" type="checkbox" value="2" /><label for="SecondToDo">Second</label>
  <input id="ThirdToDo" type="checkbox" value="3" /><label for="ThirdToDo">Third</label>
  <input id="FourthToDo" type="checkbox" value="4" /><label for="FourthToDo">Fourth</label>
  <input id="FifthToDo" type="checkbox" value="5" /><label for="FifthToDo">Fifth</label>
</form>
<script src="Circle.js"></script>

Since in this case I don't know the number of checkboxes, I can't simply add the number 20, so I thought I could get that "20" by doing the following division.

    var division= [(100/checked.toFixed(4))];
    console.log("this is division:"+ division);

and then with this division variable, replace the 20 from the previous code. But here is where I have the main problem, as result of every click I do in a checkbox the var percent always returns 100 and as result the ring is already fully colored.

    var percent = (checked) * (division);
    console.log("this is the percent:"+percent);

    myProgress.style.strokeDashoffset = 100 - percent;

Can somebody help me understand how can I made the var percent more precise, I know I'm mixing different types to get the result I want and most probably that is where my error is , but my problem is that I can't identify this mix of types interacting to each other, I'm not sure if the result I get from var division is considered a number, array or percent?

Thank you all for your help.