Adding for loop inside click event

Question

I am having 5 checkboxes,when i click each check box percentage should be increased similarly when i uncheck the checkbox percentage should be decreased.

$(document).ready(function(){
        var arr=['c','f','i','n','s'];
        var n=6;
            $("input").click(function(){
            if(this.checked){
            if($.inArray(this.value,arr)>-1){
                for(var count=1;count<n;count++)
                { 

                  var percentage=Math.ceil(count * (100/5));
                  alert('your percentage is' + percentage);
                }
            }else{}}
            });

});

But it is returning 100% for a single click.What i am doing wrong?

why are you using checkboxes to do what radios are intended to be used for? — charlietfl
– charlietfl, Commented Dec 29, 2016 at 7:03
@charlietfl Nothing i am just practicing examples to learn jquery — moksha
– moksha, Commented Dec 29, 2016 at 7:11
check the answer provided by me , should work perfectly for you — Viplock
– Viplock, Commented Dec 29, 2016 at 8:26

Bharatsing Parmar · Accepted Answer · 2016-12-29 09:02:09Z

1

You can check updated fiddle jsfiddle.net/x4bb87L4/3/

Code that updated

    $(document).ready(function(){       
      var arr=['c','f','i','n','s']; 

      $("input").click(function(){
        $(this).siblings('input[type="checkbox"]').not(this).prop('checked', false).next().removeClass("fa-times cross fa-check tick");

        if(this.checked){
            if($.inArray(this.value,arr)>-1){                                                   
                $(this).next().addClass("fa-check tick");           
            }else{                                                        
               $(this).next().addClass("fa-times cross");           
            }                 
        }else{
            $(this).next().removeClass("fa-check times tick cross");
        }

        var correctAnswer=$(".fa-check.tick").length;
        //var wrongAnswer=$(".fa-times.cross").length;
        //var count=correctAnswer-wrongAnswer;
        var count=correctAnswer;
        count=count<0?0:count;
        $('#value').html(count);
        var percentage=Math.ceil(count * (100/5));
        percentage=percentage<0? 0 :percentage;
        $('#percent').html(percentage);

    });             
 });

edited Dec 29, 2016 at 9:02

answered Dec 29, 2016 at 7:00

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

moksha Over a year ago

Have you seen above fiddle? Is it possible to decrease percentage when i click wrong answer?i.e i have to allocate only 20 percent per row .when i click correct answer percentage should be increased when i click wrong answer percentage should be decreased

Bharatsing Parmar Over a year ago

yes I have updated fiddle code. Check it jsfiddle.net/x4bb87L4/2

moksha Over a year ago

I am getting wrong answer:-( i said i need to allocate only 20 percent per row,But it checks all check boxes.Can you please check again?

Bharatsing Parmar Over a year ago

Yes let me check it

Bharatsing Parmar Over a year ago

I have updated logic as per you told. You can check it here jsfiddle.net/x4bb87L4/3

Viplock · Accepted Answer · 2016-12-29 08:25:17Z

1

According to me this should be done by creating an other array like

var n=0;
  var arrayforselection=[];
        $("input").click(function(){
        if(this.checked){

  if($.inArray(this.value,arrayforselection)<0){
  if($.inArray(this.value,arr)>-1){
  arrayforselection.push(this.value);
  }
  }
  }else{

  if($.inArray(this.value,arrayforselection)>=0){
  if($.inArray(this.value,arr)>-1){
  arrayforselection.indexOf(this.value)
  arrayforselection.splice(arrayforselection.indexOf(this.value),1);
  }
  }
  }
  n=arrayforselection.length;
        if($.inArray(this.value,arr)>-1){
  if(n===0){
             $('#value').html(n)
              var percentage=Math.ceil(n * (100/5));
              $('#percent').html(percentage)

  }
            for(var count=1;count<=n;count++)
            {
              $('#value').html(count)
              var percentage=Math.ceil(count * (100/5));
              $('#percent').html(percentage)
            }
        }else{

  }
        });

the previous selected Answer will not work in you multiple times check and unchecked the correct answer , it will increase the percentage and will not decrease it . Find the Updated Jsfiddel here

edited Dec 29, 2016 at 8:25

answered Dec 29, 2016 at 7:54

Viplock

3,3191 gold badge26 silver badges34 bronze badges

1 Comment

moksha Over a year ago

Ok i will check

Collectives™ on Stack Overflow

Adding for loop inside click event

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related