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 !!!!

First you need an event/s for the dynmically created checkboxes, otherwise nothing will happen. — Xotic750, Mar 10 '14 at 13:21
You need an event assigned to them, just like the [`click`](http://api.jquery.com/click/) event that you assigned to `$('#btnSaveCheckBox')` along with a handler function (like the anonymous function for your `click`). Probably a [`change`](http://api.jquery.com/change/) event. Or use a delegated event with [`on`](http://api.jquery.com/on/). Plenty of examples on SO, here is one http://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event — Xotic750, Mar 10 '14 at 13:25

score 3 · Accepted Answer · edited May 23 '17 at 12:13

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;
}

Thank you very much for your detailed answer. It works now. I want to show the percent of the progress bar. How to do that? — AdiT, Mar 10 '14 at 13:44
@AdiT Please see my Updated answer, I linked to a related SO Answer that will be a bit more detailed. — Nunners, Mar 10 '14 at 13:45
In updateProgress function if(numChecked > 0) should be if(numChecked >= 0) for progress bar value 0 when all checkboxes are uncheked. — Jacob Sobus, Mar 10 '14 at 13:51
@JacobSobus Thanks for noticing that, I've changed it to be `if (numAll > 0)` to avoid a divide by 0 error, which is what it was intended for. — Nunners, Mar 10 '14 at 14:39
@AdiT You have replaced the wrong line, try replacing the line inside the `updateProgress` function that sets the value with that code. And change the code in the Document.ready handler to be what it was before. It should then work. http://jsfiddle.net/fD8Ss/10/ — Nunners, Mar 10 '14 at 14:41

JF it · Answer 2 · 2014-03-10T13:27:53.003

0

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" ) + "%" );
  },
});

edited Mar 10 '14 at 13:27

answered Mar 10 '14 at 13:19

JF it

2,403
3
20
30

I'm sorry, but I'm not looking for that. – AdiT Mar 10 '14 at 13:22
Hi sorry - @AdiT i misunderstood - please see updated fiddle: http://jsfiddle.net/KAALv/8/ – JF it Mar 10 '14 at 13:33

How to change progress bar with creating dynamic checkboxes

2 Answers2