입력 변경 작업 (체크 박스 : 체크)

체크 상자 입력을 사용하여 진행률 표시 줄을 만들려고했습니다. 25 % 확인란을 클릭하면 진행률 막대가 25 %로 채워집니다 ... 50 %, 75 %와 100 % 그리고 그것의 일. 그러나 선택을 취소하면 가치가 제로가됩니다. 25 %가 체크되고 체크 후 50 %를 체크하지 않으면 체크 된 값으로 유지되기를 원합니다. 여기 내 코드입니다 (여기에 완전한 파일을 두어서 미안합니다. 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>

출처

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

입력 변경 작업 (체크 박스 : 체크)

답변

관련 문제