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

Posted 2023-05-09

【中文标题】根据显示的复选框显示警报

【英文标题】：display alert based on checkboxes displayed

【发布时间】：2016-12-02 11:42:18

【问题描述】：

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

【问题讨论】：

你能为此制作一个 jsfiddle 或其他东西吗？我不知道为什么我的答案不起作用，所以这会很有帮助。

【参考方案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();
        elsedocument.getElementById('welcomeDiv').style.display = "block";

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review

它显示了应更改原始代码中的哪些内容以获得所需的结果。我会在里面写一个注释，以使这一点更清楚。

这不起作用。当 Med A 是特定时间复选框列表中唯一的药物时，它仍然会问“你为什么不服用 Med B 和 Med C”

我认为我的问题还不够清楚，我想说的是，目前说用户是否应该在晚上 7 点服用 Med A，而当它是晚上 7 点时，用户点击了按钮和 Med 显示一个复选框，当用户单击提交按钮时，系统应显示“做得好，您已服用所有药物！”。但是此时系统会说“你为什么不服用 Med B 和 Med C”，而 Med A 是当时用户应该服用的唯一药物。因为 Med B 和 Med C 是供用户在其他时间服用的

对。所以在你的代码中，你已经在你不想展示的药物上设置了.style.display = "none"。稍后当它提交时，您无需担心您设置.style.display = "none" 的复选框，因为用户不打算检查这些复选框。所以你只需要查看是否有任何未被隐藏的复选框来查看它们是否被选中。