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，或在创建复选框时手动分配事件处理程序。

第一个示例显示使用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;
}

Answer 2

检查这个小提琴：

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

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

2 个答案: