javascript - display alert based on checkboxes displayed -

i'm building medication reminder app, , works user clicking button , system display medication user should taking based on current time. , if user should take med , med b @ 3pm, , when user clicked button @ 3pm, 2 checkboxes med , med b pop up, if user checked "med a", system should display message asking "why didn't take med b?" dropbox allowing user choose reason.

however @ moment, if user checked "med a", system display message asking "why didn't take med b , med c" because med c listed 1 of option checkbox, wasn't displayed should taking @ different time. doesn't matter medication user should taking @ particular time, system ask based on checkboxes options , not based on current displayed checkboxes (which displayed based on time).

js:

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 take ' + msg.join(' , ') : 'well done, have taken medications!', alertdismissed, 'message 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';     } 

html

<div class="inner" id=text><button onclick="myfunction()" >check</button></div>  </div>     <div id=aa style="display:none">         <form>             <div id='meda'>                 <input type="checkbox" name="med a" value="a">medication             </div>             <div id='medb'>                 <input type="checkbox" name="med b" value="b">medication b             </div>             <div id='medc'>                 <input type="checkbox" name="med c" value="c">medication c             </div>                  <div id="welcomediv" style="display:none;" class="dropdown" title="basic dialog">                     <select>                         <option value="" disabled="disabled" selected="selected">please choose one</option>                         <option value="forget">forget take</option>                         <option value="notfeeling">not feeling taking it</option>                         <option value="sideeffect">worried side-effects</option>                         <option value="sideeffect">run out of supplements</option>                         <option value="misclick">misclick</option>                         <option value="others">others</option>                     </select>                         <input id="btnbutton" class="btn" type="button" onclick="know();hide()" value="submit">                 </div>             <input id=xbutton type="button" onclick="validate();showdiv()" value="submit">         </form> 

you can not add name list of meds if checkbox not shown. 1 code change (shown below) should enough fix it.

var valid = true;  function validate() {         var msg = [];         [].foreach.call(document.queryselectorall('input[type="checkbox"]:not(:checked)'), function(elem, index) {                         msg.push(elem.name); valid = false;                         });  if(!valid) {                         navigator.notification.alert(msg.length ? 'why didnt take ' + msg.join(' , ') : 'well done, have taken medications!', alertdismissed, 'message you:','done'); }          } }  function showdiv(){           if(valid) {             hide();         }else{document.getelementbyid('welcomediv').style.display = "block";} }