javascript - How to change progress bar with creating dynamic checkboxes -

i have looked on , found many similar threads, none of them answered question specific situation:

i want to, when visitor creates dynamic checkbox, visitor checks or unchecks checkbox increase or decrease value shown on progress bar. in addition want show percent of progress bar. this: image

here demo

here code: html:

<div id="cblist"></div> <input type="text" id="checkboxname" /> <input type="button" value="ok" id="btnsavecheckbox" /> <div id="progressbar"></div> <br/> 

jquery:

$(document).ready(function () {     $('#btnsavecheckbox').click(function () {         addcheckbox($('#checkboxname').val());         $('#checkboxname').val("");     });      $(function () {         $("#progressbar").progressbar({             value: 0,             max: 100         });      }); });  function addcheckbox(name) {     var container = $('#cblist');     var inputs = container.find('input');     var id = inputs.length + 1;      $('<input />', {         type: 'checkbox',         id: 'cb' + id,         value: name     }).appendto(container);      $('<label />', {         'for': 'cb' + id,         text: name     }).appendto(container);      $('<br/>').appendto(container); } 

please !!!!

you need add handler page determine when checkbox has been checked / unchecked.

to can use delegate event handler, or assign event handler manually when create checkbox.

this first example showing using delegated event handler :

jsfiddle

code :

$(document).ready(function() {     $('#btnsavecheckbox').click(function() {         addcheckbox($('#checkboxname').val());         $('#checkboxname').val("");     });      $(document).on('change', 'input[type="checkbox"]', updateprogress);      $("#progressbar").progressbar({         value: 0,         max: 100     });         });  function updateprogress() {     var numall = $('input[type="checkbox"]').length;     var numchecked = $('input[type="checkbox"]:checked').length;      if (numall > 0) {         var perc = (numchecked / numall) * 100;         $("#progressbar").progressbar("value", perc);     } }  function addcheckbox(name) {    var container = $('#cblist');    var inputs = container.find('input');    var id = inputs.length+1;     $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendto(container);    $('<label />', { 'for': 'cb'+id, text: name }).appendto(container);    $('<br/>').appendto(container);      updateprogress(); } 

the changes made code addition of updateprogress(); function, looks checkboxes on page , determines percentage of them have been checked, update progress bar value.

also call updateprogress function @ end of addcheckbox function, re-calculate percentage done when new elements added.

and following line of code in document.ready handler :

$(document).on('change', 'input[type="checkbox"]', updateprogress); 

this line of code creates delegate event handler monitor checkboxes on page, , may added in future determine when have been changed, , when have execute updateprogress function.

---

by manually assigning event handler on creation :

if don't want use delegated event handler , want use direct event handler, can following.

change line creates checkbox in addcheckbox function following :

   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendto(container).change(updateprogress); 

this adds event handler change event of element , calls updateprogress function.

---

to display value on progress bar : see answer

basically when set value of progress bar (in updateprogress function) change line following :

    $("#progressbar").progressbar("value", perc)     .children('.ui-progressbar-value')     .html(perc.toprecision(3) + '%')     .css("display", "block"); 

this display value in progress bar. can format text using following css :

.ui-progressbar-value {     font-size: 13px;     font-weight: normal;     line-height: 18px;     text-align:center; }