Java-Scripts.net

Live Checkboxes (Progress)

Gamify your forms. This script counts checked items instantly, creating a visual progress indicator that encourages completion.

Project Checklist
0%

Copy the Script

<script>
function calcProgress() {
    var boxes = document.querySelectorAll('.track-me');
    var checked = 0;
    
    boxes.forEach(box => {
        if(box.checked) checked++;
    });
    
    var percent = (checked / boxes.length) * 100;
    document.getElementById('bar').style.width = percent + "%";
    document.getElementById('bar').innerText = Math.round(percent) + "%";
}
</script>

<div style="background:#eee; width:100%;">
  <div id="bar" style="background:green; width:0%; color:white;">0%</div>
</div>

<input type="checkbox" class="track-me" onchange="calcProgress()"> Task 1
<input type="checkbox" class="track-me" onchange="calcProgress()"> Task 2

Frequently Asked Questions

Yes. It helps users see how much of a long application they have completed.

This specific script does not save data. To remember the checked boxes after a page reload, you would need to save the state to `localStorage`.

Yes. Instead of counting 1 per box, you can add a `data-weight='10'` attribute to each checkbox and sum those values.