0

チェックボックス入力で動作するプログレスバーを作成しようとしました.25％チェックボックスをクリックすると、プログレスバーが25％塗りつぶされました.... 50％、75％、100％で同じで、動作しています。しかし、チェックを外すと、価値がゼロになります。25％がチェックされ、チェック後に50％のチェックを外した場合、チェックされた値のままにしたいので、0ではなく25％に移動する必要があります。これが私のコードです（ここに完全なファイルを置いて申し訳ありません、私は入れようとしました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 に答える