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

Posted 2023-03-05

【中文标题】如何通过创建动态复选框来更改进度条

【英文标题】：How to change progress bar with creating dynamic checkboxes

【发布时间】：2014-04-13 14:21:00

【问题描述】：

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

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

请帮忙！！！！

【问题讨论】：

首先你需要为动态创建的复选框设置一个事件，否则什么都不会发生。

请你提供一些代码？？

您需要为它们分配一个事件，就像您分配给$('#btnSaveCheckBox') 的click 事件以及一个处理函数（如您的click 的匿名函数）。可能是change 事件。或者使用on 的委托事件。 SO上有很多例子，这里有一个***.com/questions/7031226/…

【参考方案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;

【讨论】：

非常感谢您的详细解答。现在可以了。我想显示进度条的百分比。该怎么做？

@AdiT 请查看我的更新答案，我链接到一个相关的 SO 答案，该答案会更详细一些。

在 updateProgress 函数中 if(numChecked > 0) 应该是 if(numChecked >= 0) 当所有复选框都未选中时进度条值为 0。

@JacobSobus 感谢您注意到这一点，我已将其更改为 if (numAll > 0) 以避免除以 0 错误，这是它的目的。

@AdiT 您替换了错误的行，尝试替换 updateProgress 函数中用该代码设置值的行。并将 Document.ready 处理程序中的代码更改为之前的代码。然后它应该工作。 jsfiddle.net/fD8Ss/10

【参考方案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" ) + "%" );
  ,
);

【讨论】：

对不起，我不是在找那个。

嗨对不起 - @AdiT 我误解了 - 请参阅更新的小提琴：jsfiddle.net/KAALv/8