如何通过创建动态复选框来更改进度条

Question

我翻遍了，发现很多类似的帖子，但没有一个能真正回答我这个具体情况的问题：

我想，当访问者创建动态复选框时，访问者选中或取消选中一个复选框会增加或减少进度条上显示的值。另外我想显示进度条的百分比。像这样：Image

这是demo

代码如下： 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);
}

请帮忙！！！！

Answer 1

您需要在页面中添加一个处理程序以确定Checkbox 何时被选中/取消选中。

为此，您可以使用delegate event handler，或在创建复选框时手动分配事件处理程序。

第一个示例向您展示如何使用委托事件处理程序：

JSFiddle

代码：

$(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();
}

对您的代码所做的更改是添加了updateProgress(); 函数，该函数会查找页面上的所有复选框并确定已选中的百分比，然后它将使用此值更新进度条。

还有在addCheckbox 函数末尾调用updateProgress 函数，以重新计算添加新元素时完成的百分比。

以及 Document.Ready 处理程序中的以下代码行：

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

这行代码创建了一个 Delegate 事件处理程序来监视页面上的所有复选框，以及将来可能添加的任何复选框，以确定它们何时被更改，当它们发生更改时将执行updateProgress 函数。

---

通过在创建时手动分配事件处理程序：

如果您不想使用 Delegated 事件处理程序而想使用直接事件处理程序，您可以执行以下操作。

将在addCheckbox 函数中创建checkbox 的行更改为以下内容：

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

这会为元素的change 事件添加一个事件处理程序，并调用updateProgress 函数。

---

在进度条上显示值： See this answer

基本上当您设置进度条的值时（在updateProgress 函数中）将行更改为以下内容：

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

这将在进度条中显示值。您可以使用以下 CSS 格式化文本：

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

Answer 2

检查这个小提琴：

更新 http://jsfiddle.net/KAALv/8/

使用以下代码增加进度条：

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

UPDATE 也可以使用它为文本框提供百分比值..

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