title: display alert based on checkboxes displayed
body: <p>I'm building a medication reminder app, and it works by user clicking a button and the system will display the medication the user should be taking based on the current time. And say if the user should take Med A and Med B at 3pm, and when user clicked the button at 3pm, two checkboxes with Med A and Med B will pop up, BUT if the user only checked "Med A", the system should display a message asking "why didn't you take Med B?" with a dropbox allowing the user to choose the reason. </p>
  
  <p>However at the moment, if the user only checked "Med A", the system will display message asking "why didn't you take Med B and Med C" because Med C is also listed as one of the option for checkbox, just that it wasn't displayed as it should be taking at a different time. So it doesn't matter what medication the user should be taking at any particular time, the system will always ask based on all checkboxes options and not based on the current displayed checkboxes (which is displayed based on time).</p>
  
  <p>JS:</p>
  
  <pre><code>function validate() {
          var msg = [];
          [].forEach.call(document.querySelectorAll('input[type="checkbox"]:not(:checked)'), function(elem, index) {
                          msg.push(elem.name);
                          });
                          navigator.notification.alert(msg.length ? 'Why didnt you take ' + msg.join(' and ') : 'Well done, you have taken all the medications!', alertDismissed, 'Message for you:','Done');
  
          }
  
      function showDiv(){
          if(document.querySelectorAll('input[type="checkbox"]:not(:checked)').length==0) {
              hide();
          }else{document.getElementById('welcomeDiv').style.display = "block";}
      }
  
      function myFunction(){
          var hour = (new Date()).getHours();
          showMed('A', hour == 15);
          showMed('B', hour == 15);
          showMed('C', hour == 19);
      }
  
      function showMed(med, show) {
          document.getElementById('med' + med).style.display = show ? '' : 'none';
      }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="inner" id=text&gt;&lt;button onClick="myFunction()" &gt;Check&lt;/button&gt;&lt;/div&gt;
  
  &lt;/div&gt;
      &lt;div id=aa style="display:none"&gt;
          &lt;form&gt;
              &lt;div id='medA'&gt;
                  &lt;input type="checkbox" name="Med A" value="A"&gt;Medication A
              &lt;/div&gt;
              &lt;div id='medB'&gt;
                  &lt;input type="checkbox" name="Med B" value="B"&gt;Medication B
              &lt;/div&gt;
              &lt;div id='medC'&gt;
                  &lt;input type="checkbox" name="Med C" value="C"&gt;Medication C
              &lt;/div&gt;
  
                  &lt;div id="welcomeDiv" style="display:none;" class="dropdown" title="Basic dialog"&gt;
                      &lt;select&gt;
                          &lt;option value="" disabled="disabled" selected="selected"&gt;Please choose one&lt;/option&gt;
                          &lt;option value="forget"&gt;Forget to take&lt;/option&gt;
                          &lt;option value="notfeeling"&gt;Not feeling like taking it&lt;/option&gt;
                          &lt;option value="sideeffect"&gt;Worried about side-effects&lt;/option&gt;
                          &lt;option value="sideeffect"&gt;Run out of supplements&lt;/option&gt;
                          &lt;option value="misclick"&gt;Misclick&lt;/option&gt;
                          &lt;option value="others"&gt;Others&lt;/option&gt;
                      &lt;/select&gt;
                          &lt;input id="btnbutton" class="btn" type="button" onClick="know();hide()" value="Submit"&gt;
                  &lt;/div&gt;
              &lt;input id=xbutton type="button" onClick="validate();showDiv()" value="Submit"&gt;
          &lt;/form&gt;
  </code></pre>