How to change progress bar with creating dynamic checkboxes

Question

I have looked all over and found many similar threads, but none of them really answered my question with this specific situation:

I want to, when the visitor creates dynamic Checkbox, then the visitor checks or unchecks a checkbox it will increase or decrease the value shown on the progress bar. In addition I want to show the percent of the progress bar. Like this: Image

Here is a demo

Here is the 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 HELP !!!!

Answer 1

You need to add a Handler to the page to determine when a Checkbox has been checked / unchecked.

To do this you can use a delegate event handler, or assign the Event handler manually when you create the checkbox.

This first example is showing you using the 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 to your code are the addition of the updateProgress(); function, which looks for all the Checkboxes on the page and determines the percentage of them that have been checked, it will then update the Progress bar with this value.

Also the call to the updateProgress function at the end of your addCheckbox function, to re-calculate the percentage done when new elements are added.

And the following line of code in the Document.Ready handler :

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

This line of code creates a Delegate event handler to monitor all checkboxes on the page, and any that may be added in future to determine when they have been changed, and when they have it will execute the updateProgress function.

---

By Manually Assigning Event Handler on Creation :

If you don't want to use a Delegated event handler and want to use a direct event handler, you can do the following.

Change the line that creates the checkbox in your addCheckbox function to the following :

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

This adds an event handler to the change event of the element and calls the updateProgress function.

---

To display the Value on the Progress bar : See this answer

Basically when you set the value of the Progress bar (in the updateProgress function) change the line to be the following :

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

This will then display the value in the progress bar. You can format the text using the following CSS :

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

Answer 2

check this fiddle:

UPDATED http://jsfiddle.net/KAALv/8/

to increment progressbar use these code:

var val = $("#progressbar").progressbar( "value" ) || 0;
$("#progressbar").progressbar( "value", val + 5 );

UPDATE Also use this to give percentage value to a textbox..

$("#progressbar").progressbar({
        value: 0,
        max: 100,       
change: function() {
    $("#txtProgressbarStatus").text( $("#progressbar").progressbar( "value" ) + "%" );
  },
});