function grid_diag(index) {
  
  // complicated algorithm -- took one hour for me to understand how to select all the checkboxes diagonally.
  
  var _gc = 20;
  var _set = [];
  
  var nC = 0;
  if (index <= 20) {
    nC = index;
  }
  
  
  else if (index <= (_gc * 20)) {
    nC = index / 20;
    nC = (20 - nC) + 1;
  }
  
  var _last = index;
  for ( i = 0; i < nC; i++ ) {
    _set.push(_last);
    
    _last = (_last) + (_gc - 1);
  }
  
  return _set;
}

$(document).ready(function(){
  $('#actions').on('click', function(){
  });
  
  $('input').on('change', function(){
    var _idx = parseInt($(this).attr('data-index'));
    var _toCheck = grid_diag(_idx);
    
    for (i = 0; i < _toCheck.length; i++) {
      $('#radio_' + _toCheck[i]).attr('checked', true);
    } 
  });
  
  
  $('#action').on('click', function(){
    
    // remove all _zoom classes
    $('*').removeClass('_zoom');
    
    
    var t = 200;
    for (i = 1; i <= 20; i++) {
      var _cgrids = grid_diag(i);
      console.log(_cgrids);
      for (j = 0; j < _cgrids.length; j++) {
            var _id = _cgrids[j];
            $('#radio_' + _id).addClass('_zoom');
      }
    }
  });
  

  
  
});