प्रदर्शित चेकबॉक्स के आधार पर अलर्ट प्रदर्शित करें

मैं एक दवा अनुस्मारक ऐप बना रहा हूं, और यह उपयोगकर्ता द्वारा एक बटन पर क्लिक करके काम करता है और सिस्टम उस दवा को प्रदर्शित करेगा जो उपयोगकर्ता को वर्तमान समय के आधार पर लेना चाहिए। और कहें कि यदि उपयोगकर्ता को 3 बजे मेड ए और मेड बी लेना चाहिए, और जब उपयोगकर्ता 3 बजे बटन पर क्लिक करता है, तो मेड ए और मेड बी के साथ दो चेकबॉक्स पॉप अप होंगे, लेकिन यदि उपयोगकर्ता केवल "मेड ए" की जांच करता है, तो सिस्टम को चाहिए एक संदेश प्रदर्शित करें जिसमें पूछा गया हो कि "आपने मेड बी क्यों नहीं लिया?" एक ड्रॉपबॉक्स के साथ उपयोगकर्ता को कारण चुनने की अनुमति देता है।

हालाँकि इस समय, यदि उपयोगकर्ता केवल "मेड ए" की जाँच करता है, तो सिस्टम "मेड बी और मेड सी क्यों नहीं लिया" पूछते हुए संदेश प्रदर्शित करेगा क्योंकि मेड सी को भी चेकबॉक्स के विकल्प में से एक के रूप में सूचीबद्ध किया गया है, बस वह इसे प्रदर्शित नहीं किया गया था क्योंकि इसे एक अलग समय पर लेना चाहिए था। इसलिए इससे कोई फर्क नहीं पड़ता कि उपयोगकर्ता को किसी विशेष समय पर कौन सी दवा लेनी चाहिए, सिस्टम हमेशा सभी चेकबॉक्स विकल्पों के आधार पर पूछेगा और वर्तमान प्रदर्शित चेकबॉक्स (जो समय के आधार पर प्रदर्शित होता है) के आधार पर नहीं पूछेगा।

जेएस:

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

एचटीएमएल

<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>