如果选中了2个特定的复选框，则显示一个div；如果选中了1个复选框，则显示另一个（如果选中了2个复选框，则不显示）
[英]Show a div if 2 specific checkboxes are checked, show another if 1 checkbox is checked (don't show it if the 2 checkboxes are checked)
问题描述
There are red, green and blue boxes in my code as 3 different divs, and I want to show these divs, depending on which checkboxes are checked. 
我的代码中有3个不同的divs红色，绿色和蓝色框，我想显示这些divs，具体取决于选中了哪些复选框。
The aim is: if the blue checkbox is checked, it should show the blue div. 目的是：如果选中了蓝色复选框，则应显示蓝色div。 If the green div is checked, it should show the green div. 如果选中绿色div，则应显示绿色div。 But, to show the red div, the red AND the green checkbox should be checked. 但是，要显示红色div，应选中红色和绿色复选框。
These are working in my code, but there is a problem. 这些在我的代码中有效，但是有问题。 If the red and green checkboxes are checked, the red div appears, but the green div also appears. 如果选中了红色和绿色复选框，则会显示红色div，但也会显示绿色div。
What I need your help for is this: if the red and green checkboxes are checked, the red div should be shown, but the green checkbox should not be shown. 我需要您的帮助是：如果选中了红色和绿色复选框，则应显示红色div，但不应显示绿色复选框。 (the green div should be shown if only the green checkbox is checked.) （如果仅选中绿色复选框，则应显示绿色div。）
Thank you for your help! 谢谢您的帮助！
Here is the code: 这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($('#red').is(':checked') && $('#green').is(':checked'))
{
$(".red").show();}
else{ $(".red").hide();
}
if($('#green').is(':checked'))
{
$(".green").show();}
else{ $(".green").hide();
}
if($('#blue').is(':checked'))
{
$(".blue").show();}
else{ $(".blue").hide();
}
});
});
</script>
</head>
<body>
<div>
<label><input type="checkbox" id="red" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" id="green" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" id="blue" name="colorCheckbox" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red and green checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>
2 个解决方案
解决方案1
3 已采纳 2014-07-23 15:35:36
$('input[type="checkbox"]').click(function () {
$('.box').hide();
if ($('#blue').is(':checked')) $('.blue.box').show();
if ($('#green').is(':checked') && !$('#red').is(':checked')) $('.green.box').show();
if ($('#red').is(':checked') && $('#green').is(':checked')) $('.red.box').show();
});
解决方案2
2 2014-07-23 15:33:07
The logic in your question is correct! 您问题中的逻辑是正确的！
Just turn those requirements into code, and you'll be all set! 只需将这些要求转换为代码，您便会准备就绪！
//If the blue checkbox is checked, it should show the blue div.
if($('#blue').is(':checked')) {
$(".blue").show();
} else {
$(".blue").hide();
}
//If the green div is checked, it should show the green div.
if($('#green').is(':checked')) {
$(".green").show();
} else {
$(".green").hide();
}
//To show the red div, the red AND the green checkbox should be checked
//but not the green box.
if($('#red').is(':checked') && $('#green').is(':checked')) {
$(".red").show();
$(".green").hide();
} else {
$(".red").hide();
//no show green necessary, it will be handled above
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.