0

我尝试使用复选框输入创建进度条，当我单击 25% 复选框时，进度条填充 25%....对于 50%、75% 和 100% 及其工作方式相同。但是当我取消选中时，它会将价值归零。我希望它保持为选中的值，如果选中 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();" /> 
&nbsp;
50% <input type="checkbox" name="c2" id="c2" onChange="update2();" /> 
&nbsp;
75% <input type="checkbox" name="c3" id="c3" onChange="update3();" />  
&nbsp;
100% <input type="checkbox" name="c4" id="c4" onChange="update4();" />  
</body>
</html>
4

1 回答 1

0

今天早上我自己找到了一个解决方案，做了如下一些改动，其余的外部来源将保持不变。

完整代码：

<div id="progressbar"></div>
25% <input type="checkbox" name="c1" id="c1" onChange="update();" /> 
&nbsp;
50% <input type="checkbox" name="c2" id="c2" onChange="update();" /> 
&nbsp;
75% <input type="checkbox" name="c3" id="c3" onChange="update();" />  
&nbsp;
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 });
    }
  }
于 2013-09-11T08:33:51.550 回答