jQuery function that run some codes

Question

I have 10 checkbox in my page and I want some code run after any checkbox checked. look at my code please:

var width = 0;

    $('#checkbox1').change(function() {
       if($(this).is(":checked")) {
       width+=5;
       }
       else{
       width-=5;
       }
   //this is the code that i want it run after any of checkboxes clicked
   if (width <= 25){do something}
   if ( width > 25 && width <= 50){do something}
   if ( width > 50 &&  width <= 75){do something}
   if ( width > 75 && width <= 100){do something}
   });

Is there any way to create a function or something else to run these codes inside every checkboxes and prevent from repeating these codes?

Thanks for answers. but i want to repeat just four "if" at the bottom of the page and "width+=5" or "width-=5" is not repetitive.

'#checkbox1' is targeting only one of them. can you add a fiddle with your whole code? — JNF
– JNF, Commented Dec 25, 2014 at 16:38

A.B · Accepted Answer · 2014-12-25 16:38:55Z

2

you can use general selector for checkbox :checkbox refrence

$('input:checkbox').change(function() {
       if($(this).is(":checked")) {
       width+=5;
       }
       else{
       width-=5;
       }
   //this is the code that i want it run after any of checkboxes clicked
   if (width <= 25){do something}
   if ( width > 25 && width <= 50){do something}
   if ( width > 50 &&  width <= 75){do something}
   if ( width > 75 && width <= 100){do something}
   });

answered Dec 25, 2014 at 16:38

A.B

20.5k3 gold badges43 silver badges74 bronze badges

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

2 Comments

Sadegh Over a year ago

Thanks for answer. but i want to repeat just four "if" at the bottom of the page and "width+=5" or "width-=5" is not repetitive.

A.B Over a year ago

@user2781069 this needs to be there for every checkbox. this isnt repetition i guess

Master Slave · Accepted Answer · 2014-12-25 16:55:35Z

0

you can bind two event listeners change for the specific checkbox, and click, for all the checboxes

so your non-repetitive code on the selected checbox only

$('#checkbox1').change(function () {
    if ($(this).is(":checked")) {
        width += 5;
    }
    else {
        width -= 5;
    }
}

the repetitive code applied on all the checkboxes

 $('input[type="checkbox"]').click(function() {
           //this is the code that i want it run after any of checkboxes clicked
          if (width <= 25){do something}
          if ( width > 25 && width <= 50){do something}
          if ( width > 50 &&  width <= 75){do something}
          if ( width > 75 && width <= 100){do something}

    });

or use what A.B suggested $('input:checkbox')

edited Dec 25, 2014 at 16:55

answered Dec 25, 2014 at 16:41

Master Slave

28.6k4 gold badges61 silver badges56 bronze badges

2 Comments

Sadegh Over a year ago

Thanks for answer. but i want to repeat just four "if" at the bottom of the page and "width+=5" or "width-=5" is not repetitive.

Master Slave Over a year ago

you can register both events, one to a particular checkbox, and one applied to any checkbox. I've edited an answer

Collectives™ on Stack Overflow

jQuery function that run some codes

Thanks for answers. but i want to repeat just four "if" at the bottom of the page and "width+=5" or "width-=5" is not repetitive.

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Thanks for answers. but i want to repeat just four "if" at the bottom of the page and "width+=5" or "width-=5" is not repetitive.

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related