根据用户复选框选择显示或隐藏下拉框

Question

我正在使用 JS、HTML 和 CSS 使用 Phonegap 构建一个提醒应用程序，屏幕当前有一个“服用”按钮，当用户单击它时，它将以复选框格式显示用户正在服用的药物列表，所以用户可以选择他们服用的药物。这是JS代码：

function show(){
        document.getElementById("zero").style.display = "inline-block";
        document.getElementById("aa").style.display = "inline-block";
    }

function hide() {
        document.getElementById("zero").style.display = "none";
        document.getElementById("aa").style.display = "none";   
    }

function validate() {
        var msg = [];     
        [].forEach.call(document.querySelectorAll('input[type="checkbox"]:not(:checked)'), function(elem, index) {
        msg.push(elem.name);
        });
        alert(msg.length ? 'Why didnt you take ' + msg.join(' and ') : 'Well done you have taken all medications!');
    }

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

这是 HTML：

<div class="inner" id=text><button onClick="show()">Taken</button>
</div>
<div id=aa style="display:none">
        <form>
            <input type="checkbox" name="Medication One" value="one">Supplement One<br>
            <input type="checkbox" name="Medication Two" value="two">Supplement Two<br>
            <input type="checkbox" name="Medication Three" value="three">Supplement Three<br>

                <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="others">Others</option>
                    </select>
                        <input type="submit" onClick="hide()" value="Submit">
                </div>
            <input id=xbutton type="button" onClick="this.style.display='none';validate();showDiv()" value="Submit">
        </form>

    </div>

所以现在，当用户选择他们没有服用至少一种药物的原因时，会显示一条警报，上面写着“您为什么不服用（药物名称）/和（药物名称）？”并且将显示一个下拉框，允许用户选择原因。但是我想要做的是，如果用户选中了所有复选框（意味着他们已经服用了所有药物），那么下拉框将不会出现，只是一个显示“干得好，你已经服用了所有药物”的警报。

而且我不确定如何将它集成到我的代码中，我们将不胜感激。

Answer 1

使用您编写的一些相同代码，您可以判断是否检查了所有输入：

if(document.querySelectorAll('input[type="checkbox"]:not(:checked)').length==0) {
    alert("well done");
}