#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    Counting checkoxes with same values


    I have created a Gravity Form in Wordpress with 60 checkoxes that all contain one of 4 different values.

    I am trying to write the javascript to produce a percentage based on the checkboxes selected. Only 20 checkboxes get selected so I just need to count 4 totals for the 4 different values and calculate the precentage out of total 20.

    If you can help in any way it would be appreciated - I have very little programming experience in Javascript and cannot use php since it is not supported in Gravity Form fields.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Here is a basic demo; that I whipped up... I hope it helps.
    Code:
    <style>
    #checkboxes {
    border:solid 1px #555;
    width:369px;
    }
    #checkboxes span:nth-child(odd) {
    display:inline-block;
    padding-top:5px;
    padding-bottom:5px;
    background:rgb(192,192,192);
    margin-right:-4px;
    }
    #checkboxes span:nth-child(even) {
    display:inline-block;
    padding-top:5px;
    padding-bottom:5px;
    background:rgb(234,234,234);
    margin-right:-4px;
    }
    </style>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
    <div id="checkboxes">
    
    <span>
    <input type="checkbox" value="gravity_1"/>
    <input type="checkbox" value="gravity_1"/>
    <input type="checkbox" value="gravity_1"/>
    <input type="checkbox" value="gravity_1"/>
    </span>
    
    <span>
    <input type="checkbox" value="gravity_2"/>
    <input type="checkbox" value="gravity_2"/>
    <input type="checkbox" value="gravity_2"/>
    <input type="checkbox" value="gravity_2"/>
    </span>
    
    <span>
    <input type="checkbox" value="gravity_3"/>
    <input type="checkbox" value="gravity_3"/>
    <input type="checkbox" value="gravity_3"/>
    <input type="checkbox" value="gravity_3"/>
    </span>
    
    <span>
    <input type="checkbox" value="gravity_4"/>
    <input type="checkbox" value="gravity_4"/>
    <input type="checkbox" value="gravity_4"/>
    <input type="checkbox" value="gravity_4"/>
    </span>
    
    </div>
    
    <script>
    
    var percent1, percent2, percent3, percent4;
    var boxVal1 = 0; 
    var boxVal2 = 0;
    var boxVal3 = 0;
    var boxVal4 = 0;
    var totalCheckBoxes = $("input:checkbox").length;
    
    $("input:checkbox").click(function() {
       var inputVal = $(this).val();
       if($(this).is(":checked")) {
        switch(inputVal){
         case "gravity_1":
         boxVal1++;
         percent1 = ((boxVal1 / totalCheckBoxes) * 100);
         alert(Math.round(percent1) + "%");
         break;
         case "gravity_2":
         boxVal2++;
         percent2 = ((boxVal2 / totalCheckBoxes) * 100);
         alert(Math.round(percent2) + "%");
         break;
         case "gravity_3":
         boxVal3++;
         percent3 = ((boxVal3 / totalCheckBoxes) * 100);
         alert(Math.round(percent3) + "%");
         break;
         case "gravity_4":
         boxVal4++;
         percent4 = ((boxVal4 / totalCheckBoxes) * 100);
         alert(Math.round(percent4) + "%");
         break;
        }
       }
       else if($(this).not(":checked")) {
        switch(inputVal){
         case "gravity_1":
         boxVal1--;
         percent1 = ((boxVal1 / totalCheckBoxes) * 100);
         alert(Math.round(percent1) + "%");
         break;
         case "gravity_2":
         boxVal2--;
         percent2 = ((boxVal2 / totalCheckBoxes) * 100);
         alert(Math.round(percent2) + "%");
         break;
         case "gravity_3":
         boxVal3--;
         percent3 = ((boxVal3 / totalCheckBoxes) * 100);
         alert(Math.round(percent3) + "%");
         break;
         case "gravity_4":
         boxVal4--;
         percent4 = ((boxVal4 / totalCheckBoxes) * 100);
         alert(Math.round(percent4) + "%");
         break;
        }
       }
    });
    </script>
    Last edited by web_loone08; May 14th, 2013 at 11:01 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    Smile Thanks you kindly


    I have decided to go the php way since I need to record these - I use the dynamic fields in Gravity Forms and populate them with a function in my templates function.php file.

    It turns out - since the Javascript is client-side - it proves to hard to return the results into a form field, at least for me...

    Thanks for the effort web_loone8. I am keeping your code as a little gem.

IMN logo majestic logo threadwatch logo seochat tools logo