Using check boxes to update progress bar : Jquery

At the moment I have a check list that updates the progress bar once a check-box is clicked, however, I want the progress bar to update according to whatever the percentage is on the check-box. I have spent hours looking for a solution and trying different things but have had no luck. Any help or advice?

DEMO= http://jsfiddle.net/UznQe/

 <!DOCTYPE html>
<html>
<head>
    <title>Bars for checklist</title>
    <meta name="viewport" content="width=device-width"/>
 <link rel="stylesheet" href="themes/theme1.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8">



    <link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />


    <script src="jqm/demos/js/jquery.js">
    </script>

    <script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
    </script>

    <script>


        $(document).on('pagebeforeshow', '#checklist', function () {
            $('input[type="checkbox"]').each(function () {
                ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
            });
        });


        $(document).on('click', '.checkBoxLeft', function () {
            if ($(this).find('input[type="checkbox"]').is(':checked')) {
                $(this).removeClass('checked').addClass('not-checked');
                $(this).find('input[type="checkbox"]').attr('checked', false);
            } else {
                $(this).removeClass('not-checked').addClass('checked');
                $(this).find('input[type="checkbox"]').attr('checked', true);
            }


            var total = $("#theList input[type=checkbox]").length;
            var numChecked = $("#theList input[type=checkbox]:checked").length;
            if (numChecked == 1) {
                $("#progress").css('background', 'red');

            } else if (numChecked == 2) {
                $("#progress").css('background', 'orange');
            } else if (numChecked == 3) {
                $("#progress").css('background', 'yellow');
            } else {
                $("#progress").css('background', 'lime');
            }
            var prog = numChecked * 100 / total;
            $("#progress").css("width", prog + "%");


        });




    </script>
</head>
<body>





     <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>Task list</h1>




        <div data-role="content">
            <ul data-role="listview" id="theList" data-inset="true">
                <li>



                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
                    </div>                    
                    <a href="" class="detailListText">Task 1 (15%)</a>
                </li>
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 2 (40%)</a>
                </li>
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 3 (5%)</a>
                </li>
                 <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 4 (10%)</a>
                </li>
                 <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 5 (15%)</a>
                </li>
                 <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 6 (15%)</a>
                </li>
            </ul>
            </div>
        </div>

            <div class="meter green nostripes">
                <span id="progress" style="width: 0%"></span>
            </div>
        </div>









        <style>

            .detailListText{
    margin: 0 0 0 20px;
}

.checkBoxLeft{
    position: absolute; 
    left: 10px; 
    top: 28%;
    width: 18px;
    height: 18px;
    background: #d9d9d9;
    border-radius: 3px;  
}



.hidden-checkbox {
    display: none;
}


.not-checked {
    background-position: 18px 0;   
    background-color:#d9d9d9;
}


.checked {
    background-position: 0 0;   
    background-color:#6496bc;    
}

        .meter { 
            height: 20px;
            position: relative;
            margin: 60px 0 20px 0;
            background: #555;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            padding: 10px;
            -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
            -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
            box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
        }
        .meter > span {
            display: block;
            height: 100%;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            background-color: rgb(43,194,83);
            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(43,194,83)),
              color-stop(1, rgb(84,240,84))
             );
            background-image: -moz-linear-gradient(
              center bottom,
              rgb(43,194,83) 37%,
              rgb(84,240,84) 69%
             );
            -webkit-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            -moz-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            position: relative;
            overflow: hidden;
        }
        .meter > span:after, .animate > span > span {
            content: "";
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background-image: 
               -webkit-gradient(linear, 0 0, 100% 100%, 
                  color-stop(.25, rgba(255, 255, 255, .2)), 
                  color-stop(.25, transparent), color-stop(.5, transparent), 
                  color-stop(.5, rgba(255, 255, 255, .2)), 
                  color-stop(.75, rgba(255, 255, 255, .2)), 
                  color-stop(.75, transparent), to(transparent)
               );
            background-image: 
                -moz-linear-gradient(
                  -45deg, 
                  rgba(255, 255, 255, .2) 25%, 
                  transparent 25%, 
                  transparent 50%, 
                  rgba(255, 255, 255, .2) 50%, 
                  rgba(255, 255, 255, .2) 75%, 
                  transparent 75%, 
                  transparent
               );
            z-index: 1;
            -webkit-background-size: 50px 50px;
            -moz-background-size: 50px 50px;
            background-size: 50px 50px;
            -webkit-animation: move 2s linear infinite;
            -moz-animation: move 2s linear infinite;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            overflow: hidden;
        }

        .animate > span:after {
            display: none;
        }



        </style>
    </div>   
</body>
</html>    

Answers


Updated FIDDLE

Instead of counting the number of checked checkboxes, you add up the values of the checked checkboxes:

 //calculate percentage
 perc = 0;
 $("#theList input[type=checkbox]:checked").each(function( index ) {
     perc += parseInt($(this).val());         
 });

 if (perc < 15) {
     $("#progress").css('background', 'red');
 } else if (perc < 30) {
     $("#progress").css('background', 'orange');
 } else if (perc < 60) {
     $("#progress").css('background', 'yellow');
 } else {
     $("#progress").css('background', 'lime');
 }

 $("#progress").css("width", perc + "%");

parseInt($(this).val()) gives you an integer representation of the value.


Need Your Help

subtract the values of two columns using awk or bash

bash awk

I have some text files as shown below. I would like to subtract the values of column 2 and 4 and need to create a new column to the output.

could epoll totally replace select/poll when it is available?

linux sockets select epoll

i am new to sockets and i am learning/reading some epoll materials and codes. My questions is that could epoll totally replace select/poll when epoll is available in system(Linux)?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.