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

我看了很多遍，发现了很多类似的线程，但是没有一个真正回答了我在这个特定情况下的问题：

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

这里是一个演示

这里是代码：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);
}

请帮忙 ！！！！

---

您需要添加一个Handler到页面以确定Checkbox何时被选中/未选中。

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

第一个示例向您展示使用委托事件处理程序的情况：

的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函数。

---

要在进度条上显示值：请参阅此答案

基本上，当您设置进度条的值（在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;
}

---

检查这个小提琴：

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

增加进度条使用这些代码：

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

更新也使用这个给文本框的百分比值..

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

链接地址: http://www.djcxy.com/p/56005.html

上一篇: How to change progress bar with creating dynamic checkboxes

下一篇: Dynamically changing a checkbox doesn't trigger onChange?