使用输入更改的php / jquery进度条(复选框:复选框)
使用输入更改的php / jquery进度条(复选框:复选框)
提问于 2013-09-11 00:35:04
我尝试创建使用复选框输入的进度条，当我单击25%复选框时，进度条填充了50%、75%和100%的25%....same及其工作。但当我取消检查时，它带来的价值为零。如果选中了25%，而我在检查后取消了50%，那么它应该移动到25%，而不是0。下面是我的代码(很抱歉把完整的文件放在这里，我试图通过jsfiddle将工作代码放入其中，但我并不清楚使用该代码)：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
var x=0;
/* Just display progress bar at 1st*/
$(function() {
$( "#progressbar" ).progressbar({
value: x
});
});
// For 25% increase
function update1(){
var c1 = $('input[name="c1"]:checked').length > 0;
if(c1){
x=25;
$( "#progressbar" ).progressbar({ value: x });
}
if(!c1){
$( "#progressbar" ).progressbar({ value: x=0 });
}
}
// For 50% increase
function update2(){
var c2 = $('input[name="c2"]:checked').length > 0;
if(c2){
x=50;
$( "#progressbar" ).progressbar({ value: x });
}
if(!c2){
$( "#progressbar" ).progressbar({ value: x=0 });
}
}// For 75% increase
function update3(){
var c3 = $('input[name="c3"]:checked').length > 0;
if(c2){
x=75;
$( "#progressbar" ).progressbar({ value: x });
}
if(!c3){
$( "#progressbar" ).progressbar({ value: x=0 });
}
}// For 100% increase
function update4(){
var c4 = $('input[name="c4"]:checked').length > 0;
if(c2){
x=100;
$( "#progressbar" ).progressbar({ value: x });
}
if(!c4){
$( "#progressbar" ).progressbar({ value: x=0 });
}
}
</script>
</head>
<body>
<div id="progressbar"></div>
25% <input type="checkbox" name="c1" id="c1" onChange="update1();" />
50% <input type="checkbox" name="c2" id="c2" onChange="update2();" />
75% <input type="checkbox" name="c3" id="c3" onChange="update3();" />
100% <input type="checkbox" name="c4" id="c4" onChange="update4();" />
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-11 08:33:51
今天早上我自己找到了一个解决方案，做了如下的一些修改，rest外部资源将保持不变。
整个法典：
<div id="progressbar"></div>
25% <input type="checkbox" name="c1" id="c1" onChange="update();" />
50% <input type="checkbox" name="c2" id="c2" onChange="update();" />
75% <input type="checkbox" name="c3" id="c3" onChange="update();" />
100% <input type="checkbox" name="c4" id="c4" onChange="update();" />整个剧本：
var x=0;
/* Just display progress bar at 1st*/
$(function() {
$( "#progressbar" ).progressbar({
value: x
});
});
function update(){
// For 25% increase
var c1 = $('input[name="c1"]:checked').length > 0;
if(c1){
$( "#progressbar" ).progressbar({ value: x=+25 });
x+=25;
}
if(!c1){
$( "#progressbar" ).progressbar({ value: x=-25 });
}
// For 50% increase
var c2 = $('input[name="c2"]:checked').length > 0;
if(c2){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c2){
$( "#progressbar" ).progressbar({ value: x-25 });
}
// For 75% increase
var c3 = $('input[name="c3"]:checked').length > 0;
if(c3){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c3){
$( "#progressbar" ).progressbar({ value: x-25 });
}
// For 100% increase
var c4 = $('input[name="c4"]:checked').length > 0;
if(c4){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c4){
$( "#progressbar" ).progressbar({ value: x-25 });
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18730901
复制相关文章
相似问题
腾讯云开发者
