php/jquery進度條使用輸入變化（複選框：檢查）

我試圖創建進度條使用複選框輸入，當我點擊25％複選框時，進度條填充25％....相同的50％，75 ％和100％及其工作。但是當我取消選中時，它會將價值降至零。我希望它保持到選中的值，如果選中了25％，並且在檢查後取消選中50％，所以它應該移動到25％而不是0. 這裏是我的代碼（對不起，把整個文件放在這裏，我試圖把工作的代碼通過的jsfiddle但我不是非常清楚使用）的：php/jquery進度條使用輸入變化（複選框：檢查）

<!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>

來源

2013-09-11 Faisal

這裏，我試圖把上的jsfiddle，但它無法正常工作。 http://jsfiddle.net/fslaz/XZuPG/2/ 在我的本地主機上正常工作 – Faisal

我已經找到了解決這個早晨我自己，一點點的變化已作出如下，休息外部資源將保持不變。

整個代碼：

<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-11 08:33:51 Faisal

php/jquery進度條使用輸入變化（複選框：檢查）

回答

相關問題