Javascript 如果选中了两个特定复选框，则显示一个div；如果选中了一个复选框，则显示另一个div（如果选中了两个复选框，则不显示该div）
在我的代码中有红色、绿色和蓝色的三个div，我想显示这些div，具体取决于选中的复选框 其目的是：如果选中蓝色复选框，则应显示蓝色div。如果选中绿色div，则应显示绿色div。但是，要显示红色div，则应选中红色和绿色复选框 这些都在我的代码中工作，但有一个问题。如果选中红色和绿色复选框，则会显示红色div，但也会显示绿色div 我需要您的帮助是：如果选中红色和绿色复选框，则应显示红色div，但不应显示绿色复选框。（如果仅选中绿色复选框，则应显示绿色div。） 谢谢你的帮助 代码如下：Javascript 如果选中了两个特定复选框，则显示一个div；如果选中了一个复选框，则显示另一个div（如果选中了两个复选框，则不显示该div）,javascript,jquery,html,if-statement,checkbox,Javascript,Jquery,Html,If Statement,Checkbox,在我的代码中有红色、绿色和蓝色的三个div，我想显示这些div，具体取决于选中的复选框 其目的是：如果选中蓝色复选框，则应显示蓝色div。如果选中绿色div，则应显示绿色div。但是，要显示红色div，则应选中红色和绿色复选框 这些都在我的代码中工作，但有一个问题。如果选中红色和绿色复选框，则会显示红色div，但也会显示绿色div 我需要您的帮助是：如果选中红色和绿色复选框，则应显示红色div，但不应显示绿色复选框。（如果仅选中绿色复选框，则应显示绿色div。） 谢谢你的帮助 代码如下： <
<!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>
jQuery使用复选框显示隐藏
.盒子{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
.red{背景：#ff0000；}
.green{背景：#00ff00；}
.blue{背景：#0000ff；}
$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
如果（$（'红色'）.is（'勾选'）&&（$（'绿色'）.is（'勾选'））
{
$（“.red”）.show（）；}
else{$（“.red”）.hide（）；
}
如果（$（'#绿色'）。是（':checked'））
{
$（“.green”）.show（）；}
else{$（“.green”）.hide（）；
}
如果（$（'#蓝色'）。是（':checked'））
{
$（“.blue”）.show（）；}
else{$（“.blue”）.hide（）；
}
});
});
红色
绿色
蓝色
您已选中“红色和绿色”复选框，因此我在这里
您已选中绿色复选框，因此我在这里
您选择了蓝色复选框，因此我在这里
//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
}
你问题中的逻辑是正确的 只要把这些需求转化为代码，你就一切就绪了
//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
}
<强>
>考虑每个DIV显示和隐藏的一个完整的组合条件（if语句）。谢谢您的帮助。考虑每个DIV的一个完整的组合条件（if语句）以显示/隐藏。谢谢您的帮助。谨防“SPAGETETI代码”；而不是设置绿色状态两次，考虑添加一个“＆＆Chreed（红色）”的条件为绿色div…谢谢你的帮助。提防“斯帕杰蒂代码”；-）而不是设置绿色状态两次，考虑添加一个“＆＆Chreed（红色）”的条件为绿色div ..谢谢你的帮助。