title: How can I programmatically deselect an item in a selector (or checkbox) when a specific one is selected?
body: <p>I haven't decided yet on whether I'm going to use a Select (listbox when set to allow multiple) or a set of checkboxes, but in either case one of the values the user can select is "All"; that is the only value selected/checked by default, but if the user selects/checks any of the other values, I want the "All" value to become deselected/unchecked. Also, if subsequently the user selects the All item/checkbox, I want to deselect/uncheck all the others. I assume this is a job for jQuery, but don't know how to accomplish it...</p>
  
  <h2>Update</h2>
  
  <p>In response to jQueryRocks' proposed answer:</p>
  
  <p>With this html:</p>
  
  <pre><code>    &lt;td&gt;
          &lt;select name="siteSelector" id="siteSelector" multiple="multiple" size="6"&gt;
              &lt;option value="all" selected="selected" id="selectAll"&gt;All&lt;/option&gt;
              &lt;option class="options" value="1"&gt;1&lt;/option&gt;
              &lt;option class="options" value="2"&gt;2&lt;/option&gt;
              &lt;option class="options" value="3"&gt;3&lt;/option&gt;
              &lt;option class="options" value="16"&gt;16&lt;/option&gt;
              &lt;option class="options" value="26"&gt;26&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  </code></pre>
  
  <p>...and this jQuery (I'm showing <em>all</em> of it, just for completeness' sake):</p>
  
  <pre><code>$(function () {
      AnyTime.picker("BeginDateTime");
      AnyTime.picker("EndDateTime");
  
  $('#BeginDateTime').val(function(){
    var d = new Date();
    return d.getFullYear() + "-" + ('0' + (d.getMonth()+1)).slice(-2) + "-" + ('0' + d.getDate()).slice(-2) + " 00:00:00";
  });
  
  $('#EndDateTime').val(function(){
    var d = new Date();
    return d.getFullYear() + "-" + ('0' + (d.getMonth()+1)).slice(-2) + "-" + ('0' + d.getDate()).slice(-2) + " 23:59:59";
  });
  
      $('input#selectAll').click(function() {
      if($(this).filter(':checked').val() !== undefined) {
          $('input.options').prop('checked', true);
      }
      else {
          $('input.options').prop('checked', false);
      }
  });
  
  });
  </code></pre>
  
  <p>...I can still select "All" then something else, and "All" remains selected (when I Ctrl+click another value). Am I doing something wrong?</p>
  
  <p>Based on your code, I tried changing my html to this:</p>
  
  <pre><code>    &lt;td&gt;
          &lt;select name="siteSelector" id="siteSelector" multiple="multiple" size="6"&gt;
              &lt;option value="all" selected="selected" id="selectAll"&gt;All&lt;/option&gt;
              &lt;option id="deselectAll" value="1"&gt;1&lt;/option&gt;
              &lt;option id="deselectAll" value="2"&gt;2&lt;/option&gt;
              &lt;option id="deselectAll" value="3"&gt;3&lt;/option&gt;
              &lt;option id="deselectAll" value="16"&gt;16&lt;/option&gt;
              &lt;option id="deselectAll" value="26"&gt;26&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  </code></pre>
  
  <p>...and my (pertinent) jQuery to this:</p>
  
  <pre><code>$('input#deselectAll').click(function () {
          if ($(this).filter(':checked').val() !== undefined) {
              $('input#selectAll').prop('checked', false);
          }
      });
  </code></pre>
  
  <p>...but that doesn't work, either.</p>
  
  <h2>UPDATE 2</h2>
  
  <p>I also tried this to, for the checkbox extravaganza, no avail:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;td&gt;
      &lt;INPUT NAME="sites" TYPE="CHECKBOX" VALUE="all"&gt;All
      &lt;BR&gt;
      &lt;INPUT NAME="sites" TYPE="CHECKBOX" VALUE="1" id="options"&gt;1
      &lt;BR&gt;
      &lt;INPUT NAME="sites" TYPE="CHECKBOX" VALUE="2" id="options"&gt;2
      &lt;BR&gt;
      &lt;INPUT NAME="sites" TYPE="CHECKBOX" VALUE="3" id="options"&gt;3
      &lt;BR&gt;
      &lt;INPUT NAME="sites" TYPE="CHECKBOX" VALUE="16" id="options"&gt;16
      &lt;BR&gt;
      &lt;INPUT NAME="sites" TYPE="CHECKBOX" VALUE="26" id="options"&gt;26
      &lt;BR&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('input.options').click(function() {
      var allChecked = true;
      var allUnchecked = true;
      $('input.options').each(function() {
          if($(this).filter(':checked').val() === undefined) {
              allChecked = false;
          }
          else if($(this).filter(':checked').val() !== undefined) {
              allUnchecked = false;
          }
      });
      if(allChecked) {
          $('input#selectAll').prop('checked', true);
      }
      else if(allUnchecked) {
          $('input#selectAll').prop('checked', false);
      }
  });
  </code></pre>
  
  <p>...so I replaced the jQuery with this:</p>
  
  <pre><code>$('input#options').click(function () {
          var anyOptionsChecked;
          $('input#options').each(function () {
              if ($(this).filter(':checked').val() !== undefined) {
                  anyOptionsChecked = true;
              }
          });
          if (anyOptionsChecked) {
              $('input#selectAll').prop('checked', false);
          }
      });
  </code></pre>
  
  <p>...but that doesn't work, either.</p>
  
  <p>Should the "if ($(this).filter(':checked').val() !== undefined) {" line be instead:</p>
  
  <pre><code>if($(this).filter(':checked').val() == checked) {
  </code></pre>
  
  <p>-or:</p>
  
  <pre><code>if($(this).filter(':checked').val() === checked) {
  </code></pre>
  
  <p>-or something else altogether?</p>