根据用户复选框选择显示或隐藏下拉框
Display or hide drop down box based on user checkbox selection
我正在使用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>
因此,现在当用户选择他们为什么没有服用至少一种药物的原因时,将显示一条警报,说"你为什么不服用(药物名称)/和(药物名称)?"并且将显示一个下拉框,允许用户选择原因。但是,我想做的是,如果用户选中了所有复选框(意味着他们已经服用了所有药物),则下拉框将不会出现,只会显示一个警报,显示"干得好,您已经服用了所有药物"。
而且我不确定如何将其集成到我的代码中,任何帮助将不胜感激。
使用您编写的一些相同代码,您可以判断是否检查了所有输入:
if(document.querySelectorAll('input[type="checkbox"]:not(:checked)').length==0) {
alert("well done");
}
相关文章:
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- 数据表-隐藏/显示列
- $scope变量,ng隐藏/显示
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- JQuery隐藏/显示无法正常工作
- 隐藏/显示下面的分区根据是否选择某个选项进行选择
- 使用类而不是id在JavaScript中隐藏显示
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 隐藏/显示图像
- Javascript 中的表 - 隐藏/显示列
- 仅使用Javascript隐藏/显示元素,而不会弄乱DOM
- 隐藏/显示 js 代码不会在 IE8 或更低版本上运行
- Magento:根据所选国家/地区隐藏/显示输入字段
- 货到付款选择隐藏/显示付款方式
- "隐藏/显示”;元素和更改按钮背景图像
- Bootstrap Collapse.js切换菜单的隐藏/显示
- 如何隐藏/显示<面板>使用jquery
- 在php中隐藏/显示切换回声结果
- 如何使用jquery使2个按钮切换css,而只使用1个按钮.不显示隐藏/显示
- JQuery隐藏/显示不起作用