0
我正在用Phonegap使用JS,HTML和CSS構建一個提醒應用程序,屏幕當前有一個「已採取」按鈕,當用戶單擊它時,它將顯示用戶使用複選框格式的藥物,因此用戶可以選擇他們服用的藥物。這裏的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>
顯示「你爲什麼不服用(藥物名稱)/和(藥物名稱)?」並且會顯示一個允許用戶選擇原因的下拉框。然而,我想要做的是,如果用戶選中了所有複選框(意味着他們已經服用了所有藥物),那麼下拉框不會出現,只是顯示「幹得好,你已服用所有藥物」的警報。
我不確定如何將它集成到我的代碼中,任何幫助將不勝感激。