How to show and hide div elements based on the click of checkboxes in jQuery
In this post we will give you information about How to show and hide div elements based on the click of checkboxes in jQuery. Hear we will give you detail about How to show and hide div elements based on the click of checkboxes in jQueryAnd how to use it also give you demo for it if it is necessary.
Use the jQuery toggle() method
The following example will demonstrate you how to show and hide div elements based on the selection of checkboxes using the jQuery toggle() method. The div boxes in the example are hidden by default using the CSS display property which value is set to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Checkboxes</title>
<style>
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
</div>
<div >You have selected <strong>red checkbox</strong> so i am here</div>
<div >You have selected <strong>green checkbox</strong> so i am here</div>
<div >You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>
Hope this code and post will helped you for implement How to show and hide div elements based on the click of checkboxes in jQuery. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs