基於顯示的複選框顯示提醒

Question

我正在構建藥物提醒應用程序，它通過用戶單擊按鈕工作，系統將根據當前時間顯示用戶應該服用的藥物。並且說如果用戶應該在下午3點拿Med A和Med B，並且當用戶在下午3點點擊按鈕時，會彈出兩個帶Med A和Med B的複選框，但是如果用戶只選中了「Med A」，系統應該顯示一條消息，詢問「你爲什麼不服用Med B？」用一個Dropbox允許用戶選擇原因。

但是目前，如果用戶只選中了「Med A」，系統將顯示詢問「您爲什麼不選擇Med B和Med C」的消息，因爲Med C也被列爲選項之一複選框，只是它沒有顯示，因爲它應該在不同的時間。因此，無論用戶在任何特定時間應採取何種藥物都無所謂，系統將始終根據所有複選框選項進行詢問，而不是基於當前顯示的複選框（基於時間顯示）。

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 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'; 
    } 

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 A 
      </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 to take</option> 
         <option value="notfeeling">Not feeling like taking it</option> 
         <option value="sideeffect">Worried about 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> 

Answer 1

您可以無法這個名字添加到吃藥的列表中，如果沒有顯示覆選框。只需更改一次代碼（如下所示）即可解決問題。

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 you take ' + msg.join(' and ') : 'Well done, you have taken all the medications!', alertDismissed, 'Message for you:','Done'); } 

     } 
} 

function showDiv(){ 
      if(valid) { 
      hide(); 
     }else{document.getElementById('welcomeDiv').style.display = "block";} 
}