title: check box if select one un-select all other
body: <p>Ok, so i have a list of check boxes 1, 2, 3, 4 and 5. I would like the function to select 2, 3, 4 and 5 but if 1 is selected then un-select 2, 3, 4 and 5, once 2 to 5 are un-selected display a message in a div.</p>
  
  <p>So far I can select 1 and one of the others... and the message comes on selection of 1</p>
  
  <p><strong>problem 1</strong>
  I cant un-select 2 to 5 once 1 is selected  </p>
  
  <p><strong>problem 2</strong>
  The message is displayed on page load even if the box is un-selected.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked"  /&gt;
  one &lt;br/&gt;
  
  &lt;input type="checkbox" class="check" /&gt;
  two &lt;br/&gt;
  
  &lt;input type="checkbox" class="check" /&gt;
  three &lt;br/&gt;
  
  &lt;input type="checkbox" class="check" /&gt;
  four &lt;br/&gt;
  
  &lt;input type="checkbox" class="check" /&gt;
  five
  
  &lt;div id="hidden"&gt;Two to five can not be selected whilst you have one selected&lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong> </p>
  
  <pre><code>$('input.check').on('change', function() {
      $('input.check').not(this).prop('checked', false);  
  });
  
  $(document).ready(function(){
    $("#boxchecked").click(function ()
    {
        if ($("#boxchecked").is(':checked'))
        {
            $("#hidden").show();
        }
        else
        {
            $("#hidden").hide();
        }              
    });
  });
  
  $('input[name=CheckboxGroup1]').attr('checked', false);
  </code></pre>