title: Using div.style.display "block" : "none" to hide/unhide based on 2 checkboxes
body: <p>I have 2 <code>checkboxes</code> that when clicked should hide/unhide <code>divs</code>.</p>
  
  <ul>
  <li>On the initial page load, if <code>fundingAvailable</code> = <code>false</code> the Upload should be hidden. (see image)</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/ynZBD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ynZBD.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <ul>
  <li>When user clicks <code>Special Handling</code> checkbox, the Upload should be <code>hidden</code>. (see image)</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/CnGUe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CnGUe.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <ul>
  <li>When user clicks <code>Override Funding</code> checkbox, and <code>fundingAvailable</code> = <code>false</code>, the Upload should be <code>shown</code>. (see image)</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/MYr9d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MYr9d.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>This is what I have so far:</p>
  
  <p><em>jsp</em></p>
  
  <pre><code>&lt;INPUT TYPE="CHECKBOX" id="cbOverrideFunding" value="true" onclick="fundingAvailableWarning(&lt;%=fundingAvailable%&gt;)" &gt;
  &lt;INPUT TYPE="CHECKBOX" ID="cbSpecialHandling" value="true" onclick="specialHandlingWarning()"&gt;
  
  &lt;% if(!fundingAvailable) { %&gt;
      &lt;TR&gt;
        &lt;TD height="90" valign="top"&gt;&lt;BR&gt;
          &lt;div id="fundingAvailable" style="display: block"&gt;
             &lt;b&gt;&lt;i&gt;The upload functionality has been disabled because the funding is missing.&lt;/i&gt;&lt;/b&gt;
          &lt;/div&gt;
  
          &lt;div id="uploadFile"&gt;
           &lt;INPUT name="File1" type="file" id="File1"/&gt;
           &lt;a href="fileUpload()"&gt;
             &lt;IMG src="../../images/UploadFile.gif" alt="Upload File"&gt;
           &lt;/a&gt;
          &lt;/div&gt;
  &lt;% } %&gt;
  &lt;% else { %&gt;
      &lt;div id="uploadFile"&gt;
        &lt;INPUT name="File1" type="file" id="File1"/&gt;
        &lt;a href="fileUpload()"&gt;
          &lt;IMG src="../../images/UploadFile.gif" alt="Upload File"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="uploadFileSpecialHandling" style="display: none"&gt;
        &lt;b&gt;&lt;i&gt;The upload functionality has been disabled because of Special Handling.
        &lt;/i&gt;&lt;/b&gt;
      &lt;/div&gt;
  &lt;% } %&gt;
  </code></pre>
  
  <p><em>javascript</em></p>
  
  <pre><code>function specialHandlingWarning()
  {
      if(document.getElementById("fundingAvailable").checked) {
          var div = document.getElementById("uploadFile");
          div.style.display = div.style.display == "none" ? "block" : "none";
  
          div = document.getElementById("uploadFileSpecialHandling");
          div.style.display = div.style.display == "none" ? "block" : "none";
      }
  }
  
  function fundingAvailableWarning(fundingAvailable)
  {
      if(!fundingAvailable) {
          var div = document.getElementById("uploadFile");
          div.style.display = div.style.display == "none" ? "block" : "none";
  
          div = document.getElementById("fundingAvailable");
          div.style.display = div.style.display == "none" ? "block" : "none";
      }
  }
  </code></pre>
  
  <p>My problem is that these two divs don't play nice together. </p>
  
  <p>If I select <code>Special Handling</code> first, it displays <code>Upload</code> page and hides my Warnings.</p>