javascript - 根据显示的复选框显示警报

Question

我正在构建一个药物提醒应用程序，它的工作原理是用户单击一个按钮，系统将根据当前时间显示用户应该服用的药物。假设用户是否应该在下午 3 点服用 Med A 和 Med B，当用户在下午 3 点单击按钮时，会弹出 Med A 和 Med B 两个复选框，但如果用户只选中“Med A”，系统应该显示一条消息询问“你为什么不服用 Med B？”带有一个保管箱，允许用户选择原因。

但是目前，如果用户只选中“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";}
}