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

时间:2016-07-28 07:55:28

标签: javascript jquery function validation checkbox

我正在构建一个药物提醒应用程序,它通过用户点击一个按钮来工作,系统将根据当前时间显示用户应该服用的药物。并且如果用户应该在下午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>

1 个答案:

答案 0 :(得分:1)

如果未显示该复选框,您可以将该名称添加到meds列表中。只需一次代码更改(如下所示)即可解决问题。

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