toggle()
methodThe 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 class="red box">You have selected <strong>red 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>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
JQuery click event not Working Issue Solved
JQuery is simple Javascript which makes...HTML Country Select Dropdown List
You might need an select drop-down list...Laravel Eloquent One to Many Relationship Tutorial with Example
In a database structure, there are some...How to animate div width on mouse hover using jQuery
Use the jQuery animate() method You c...How to change the background color of a web page dynamically using JavaScript
Use the JavaScript style property You...