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

时间:2014-03-10 13:02:23

标签: javascript jquery html checkbox progress-bar

我看了很多,发现了很多类似的主题,但是在这个具体情况下,他们都没有真正回答我的问题:

我想,当访问者创建动态复选框时,访问者会选中或取消选中一个复选框,它会增加或减少进度条上显示的值。另外我想显示进度条的百分比。像这样: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);
}

请帮助!!!!

2 个答案:

答案 0 :(得分:3)

您需要向页面添加处理程序,以确定何时检查/取消选中Checkbox

要执行此操作,您可以使用delegate event handler,或在创建复选框时手动分配事件处理程序。

第一个示例显示使用Delegated 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();函数,该函数查找页面上的所有复选框并确定已检查的百分比,然后使用此更新进度条值。

同时调用updateProgress函数末尾的addCheckbox函数,重新计算添加新元素时的百分比。

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

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

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


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

如果您不想使用Delegated事件处理程序并希望使用直接事件处理程序,则可以执行以下操作。

checkbox功能中创建addCheckbox的行更改为以下内容:

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

答案 1 :(得分:0)

检查这个小提琴:

<强>已更新 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" ) + "%" );
  },
});