运行一些代码的jQuery函数

Question

我的页面中有10个复选框，我希望在选中任何复选框后运行一些代码。 请看我的代码：

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}
   });

有没有办法创建一个函数或其他东西来在每个复选框中运行这些代码并防止重复这些代码？

感谢您的回答。但我想重复四次＆＃34;如果＆＃34;在页面的底部和＆＃34;宽度+ = 5＆＃34;或＆＃34; width- = 5＆＃34;不重复。

Answer 1

您可以将常规选择器用于复选框: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}
   });

Answer 2

您可以为特定复选框绑定两个事件侦听器更改，并为所有checbox绑定单击

所以你选择的checbox上的非重复代码只有

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

在所有复选框上应用的重复代码

 $('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}

    });

或使用A.B建议的$('input:checkbox')