javascript - 检查多个复选框时如何显示div?
问题描述
id="question5_1_block"
如果在复选框的第一个字段集中检查了选项 2、3、4,我需要显示一个 div 。其中之一或全部一起,或只是 2 和 3、3 和 4 等。任何东西,这不是选项 1。
我对此很陌生,并设法让它们显示和隐藏,但是如果您取消选中其中一个,即使某些复选框仍处于选中状态,div 也会被隐藏,并且它应该保留在那里,除非未选择任何内容或选中第一个复选框。
预先感谢您的帮助
$(document).ready(function() {
$("#question5_1_block").hide();
})
$(function() {
$("#Question52").click(function() {
if ($(this).is(":checked")) {
$("#question5_1_block").show();
} else {
$("#question5_1_block").hide();
}
});
$("#Question53").click(function() {
if ($(this).is(":checked")) {
$("#question5_1_block").show();
} else {
$("#question5_1_block").hide();
}
});
$("#Question54").click(function() {
if ($(this).is(":checked")) {
$("#question5_1_block").show();
} else {
$("#question5_1_block").hide();
}
});
});
<script src=https://code.jquery.com/jquery-1.12.4.min.js></script>
<script src=https://code.jquery.com/jquery-3.1.0.js></script>
<div class="page">
<div id="form">
<h3>Do you have an account?</h3>
<p class="mb-0">Multiple answers possible </p>
<fieldset>
<p class="align-left">
<input type="Checkbox" id="Question51" name="q5" value="I have it already" />I have it already<br>
<input type="Checkbox" id="Question52" name="q5" value="No, but I would like to" />No, but I would like to<br>
<input type="Checkbox" id="Question53" name="q5" value="No, tell me more about it" />No, tell me more about it<br>
<input type="Checkbox" id="Question54" name="q5" value="No, but inform me when you have a promotion" />No, but inform me when you have a promotion
</p>
</fieldset>
<div id="msg5"></div>
<div id="question5_1_block">
<h3>How should we contact you</h3>
<fieldset>
<p class="align-left">
<input type="Checkbox" id="Question5_1" name="q5_1" value="By phone" />By phone<br>
<input type="Checkbox" id="Question5_2" name="q5_1" value="By email" />By email<br>
<input type="Checkbox" id="Question5_3" name="q5_1" value="By post" />By post
</fieldset>
</div>
</div>
</div>
</form>
解决方案
$(function() {
$("#Question52").click(showOrHideDiv);
$("#Question53").click(showOrHideDiv);
$("#Question54").click(showOrHideDiv);
});
function showOrHideDiv() {
if (condition()) {
$("#question5_1_block").show();
} else {
$("#question5_1_block").hide();
}
}
function condition() {
return $("#Question52").is(":checked")
|| $("#Question53").is(":checked")
|| $("#Question54").is(":checked");
}
应该工作的快速示例
推荐阅读
- powershell - Powershell 删除超过 x 天的文件的首选方法
- javascript - Laravel Vue - 控制台日志 Axios POST 响应与网络响应不同
- html - 在查找器都匹配的红宝石中识别要选择的html元素
- python - Mac上的Pyautogui错误?使用点击功能时无故三次点击
- android - 运行时应用程序崩溃并且不提供代码路径
- java - 房间错误:不确定如何处理插入方法的返回类型
- airflow - 将 SimpleHttpOperator 的 xcom 传递给 DatabricksSubmitRunOperator
- python - 在 Watson Machine Learning 部署的函数中安装 spacy 失败且没有错误消息
- powerbi - 使用测量值进行视觉过滤
- c++ - 使用动态布尔数组的问题