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)
Question
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.
The aim is: if the blue checkbox is checked, it should show the blue div. If the green div is checked, it should show the green div. But, to show the red div, the red AND the green checkbox should be checked.
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.
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. (the green div should be shown if only the green checkbox is checked.)
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 answers
solution1
3 ACCPTED 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();
});
solution2
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.