title: How to set up groups of checkboxes which affect each other
body: <p>Sorry for the ambiguous title, but it's quite hard to condense what I'm trying to do into a few words. Here's exactly what I'm trying to do:</p>
  
  <p>I want to have a series of groups of checkboxes. One would be gender, with checkboxes for Male and Female, one would be Region, with checkboxes for North, East, South and West and so on.</p>
  
  <p>The aim is to allow the user to select say, Male or Female, but as soon as they put a check in a checkbox of another group e.g. any of the Region checkboxes, all of their previous 'checks' from all other groups are removed.</p>
  
  <p>The point is to only allow the user to select from one group of checkboxes at a time.</p>
  
  <p>I can only think of checking which checkboxes have been marked on click using javascript, but was wondering if there was a simpler way which I may be missing.</p>
  
  <p>I've also thought that maybe a hidden radio button for each group could work.</p>
  
  <p>If anyone has a more elegant solution I'm eager to hear it.</p>