Javascript 如何在Jquery中重置progressbar

当我将卡片添加到收件箱列表时，可以双击卡片打开一个模式对话框。在该对话框中，可以动态添加一些复选框。选中复选框后，进度条将更改值

问题是，比方说，我创建了两个复选框，然后选中其中一个，进度条将显示50%完成。之后，我保存数据并按下保存按钮。对话框关闭

然后，当我向收件箱列表中添加一张新卡片并双击它打开对话框时，进度条仍然显示50%的值。您可以在下图中看到问题：

我试着用下面的代码自己修复它：但它似乎不起作用

$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());

添加新卡后如何重置进度条

HTML:

添加复选框

Jquery：

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div');

    var cnt = 0,
        $currentTarget;
    $('#AddCardBtn').click(function () {
        var $newDiv = $div.clone(true);
        cnt++;
        $newDiv.prop("id", "div" + cnt);

        $newDiv.data('checkboxes', []);

        $('#userAddedCard').append($newDiv);
        //      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);

        $('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());

        $('.allcheckbox').remove(); // Remove checkboxes
        $('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */

        /* Add checkboxes from card data */
        $.each($currentTarget.data('checkboxes'), function (i, checkbox) {
            addCheckbox(checkbox.name, checkbox.status);
        });

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });
        return false;

    });
    $("#datepicker").datepicker({
        showWeek: true,
        firstDay: 1
    });

    $("#Save").on("click", function () {
        /* Copy checkbox data to card */
        $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); 

        $('#modalDialog').dialog("close");
    });

    // Add a new checkBox
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    function addCheckbox(name, status) {
        status = status || false;

        var container = $('#modalDialog');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        div.appendTo(container);

        container.data('checkboxes').push(data);

        updateProgress();
    }

$(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)
        .children('.ui-progressbar-value')
        .html(perc.toPrecision(3) + '%')
        .css("display", "block");
    }
}   


});

$（函数（）{
//单击“功能”添加卡
var$div=$（''）.addClass（'sortable-div'）；
var cnt=0，
$currentTarget；
$（'#AddCardBtn'）。单击（函数（）{
var$newDiv=$div.clone（true）；
cnt++；
$newDiv.prop（“id”、“div”+cnt）；
$newDiv.data（'复选框'，[]）；
$（'#userAddedCard'）。追加（$newDiv）；
//警报（$（'userAddedCard'）.find（“div.sortable-div”）.length）；
});
//双击打开模态对话框窗口
$（'#userAddedCard'）.dblclick（函数（e）{
$currentTarget=$（e.target）；
$（'modalDialog，'progressbar'）.val（$currentTarget.children（'progressbar'）.val（））；
$（'.allcheckbox'）.remove（）；//删除复选框
$（'#modalDialog'）.data（'复选框'，[]）；/*重置对话框复选框数据*/
/*从卡数据中添加复选框*/
$.each（$currentTarget.data（'checkbox'），函数（i，checkbox）{
addCheckbox（checkbox.name，checkbox.status）；
});
$（'modalDialog'）。对话框({
莫代尔：是的，
身高：600，
宽度：500，
位置：'中心'
});
返回false；
});
$（“#日期选择器”）。日期选择器({
《秀周刊》：没错，
第一天：1
});
$（#保存”）。在（“单击”上，函数（）{
/*将复选框数据复制到卡*/
$currentTarget.data（'checkbox'），$（'modalDialog'）.data（'checkbox'）；
$（'modalDialog'）。对话框（“关闭”）；
});
//添加一个新的复选框
$（'#btnSaveCheckBox'）。单击（函数（）{
addCheckbox（$（'#checkBoxName'）.val（）；
$（'#checkBoxName'）.val（“”）；
});
函数addCheckbox（名称、状态）{
状态=状态| |假；
变量容器=$（“#modalDialog”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
风险值数据={
状态：状态，
姓名：姓名
};
var div=$（''，{class:'allcheckbox'}）；
$('', {
键入：“复选框”，
id:'cb'+id，
值：name
}).prop（'checked'，status.）.on（'change'，function（）{
data.status=$（this.prop（'checked'）；
}).appendTo（div）；/*设置复选框状态并监视更改*/
$('', {
‘for’：‘cb’+id，
文本：名称
}).附件（分部）；
附件组（容器）；
container.data（“复选框”）.push（数据）；
updateProgress（）；
}
$（文档）.on（'change'，'input[type=“checkbox”]”，updateProgress）；
$（“#progressbar”）.progressbar({
值：0，
最高：100
});        
函数updateProgress（）{
var numAll=$（'input[type=“checkbox”]'）。长度；
var numChecked=$（'input[type=“checkbox”]：checked'）。长度；
如果（numAll>0）{
var perc=（numChecked/numAll）*100；
$（“#progressbar”）.progressbar（“值”，perc）
.children（“.ui progressbar值”）
.html（perc.toPrecision（3）+'%'）
.css（“显示”、“块”）；
}
}   
});

单击“保存”按钮时，只需重置

#进度条

值，如下所示：

$('#progressbar').progressbar('option', 'value', 0);

您可以在以下位置查看文档：

$('#progressbar').progressbar('option', 'value', 0);