基于Checked-Box计数的褪色Divog

Question

最近，我已经想出了一些代码来处理淡入和淡出某些div，具体取决于用户检查过的复选框的数量。

虽然它的功能和服务的目的，我想知道是否有人反馈，看看是否可以转换为使用开关/情况块，这可能是一个更好的方法，而不是有太多的if/else语句的方式？有没有人有关如何写这个功能更短的投入？

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 

     if (boxChecked == 11) { 
      $('.column-3').fadeTo(500, 1.0); 
      $('.column-1, .column-2').fadeTo(500, 0.4); 
     } 
     if (boxChecked == 10) { 
      $('.column-2').fadeTo(500, 1.0); 
      $('.column-1, .column-3').fadeTo(500, 0.4); 
     }   
     else if (boxChecked == 6) { 
      $('.column-2').fadeTo(500, 1.0); 
      $('.column-1, .column-3').fadeTo(500, 0.4); 
     } 
     else if (boxChecked == 5) { 
      $('.column-1').fadeTo(500, 1.0); 
      $('.column-2, .column-3').fadeTo(500, 0.4); 
     } 
     else if (boxChecked < 5) { 
      $('.column-2, .column-3').fadeTo(500, 1.0); 
     } 
}); 

Answer 1

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 
    switch (boxChecked) { 
     case 11: 
      $('.column-3').fadeTo(500, 1.0); 
      $('.column-1, .column-2').fadeTo(500, 0.4); 
      break; 
     case 10: 
      $('.column-2').fadeTo(500, 1.0); 
      $('.column-1, .column-3').fadeTo(500, 0.4); 
      break; 
     case 6: 
      $('.column-2').fadeTo(500, 1.0); 
      $('.column-1, .column-3').fadeTo(500, 0.4); 
      break; 
     case 5: 
      $('.column-1').fadeTo(500, 1.0); 
      $('.column-2, .column-3').fadeTo(500, 0.4); 
      break; 
     case (boxChecked < 5): 
      $('.column-2, .column-3').fadeTo(500, 1.0); 
      break; 
    } 
});