Germán Schuager's blog

Mutually exclusive checkboxes with jQuery

I was needing a way for the user to select none or just one item in a set... here is how I've managed to achieve this functionality using jQuery:

<html>
  <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script type="text/javascript" language="javascript">
          $(document).ready(function() {
              $('.mutuallyexclusive').click(function () {
                  checkedState = $(this).attr('checked');
                  $('.mutuallyexclusive:checked').each(function () {
                      $(this).attr('checked', false);
                  });
                  $(this).attr('checked', checkedState);
              });
          });              
      </script>
  </head>
  <body>
      <div>
          Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="mutuallyexclusive">
          Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="mutuallyexclusive">
          Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="mutuallyexclusive">
      </div>
  </body>
</html>

(Based on this post. Thanks Tony.)