我看了很多,发现了很多类似的主题,但是在这个具体情况下,他们都没有真正回答我的问题:
我想,当访问者创建动态复选框时,访问者会选中或取消选中一个复选框,它会增加或减少进度条上显示的值。另外我想显示进度条的百分比。像这样: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);
}
请帮助!!!!
答案 0 :(得分:3)
您需要向页面添加处理程序,以确定何时检查/取消选中Checkbox
。
要执行此操作,您可以使用delegate event handler,或在创建复选框时手动分配事件处理程序。
第一个示例显示使用Delegated Event Handler:
代码:
$(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" ) + "%" );
},
});