Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to show and hide elements using jquery?

show Hide Elements By click on checkbox in Jquery

File name : index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to show Hide Elements By click on checkbox in Jquery </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.box{
color: black;
display: none;
margin-top: 20px;
}
.check{
background: #ffffff;
}
</style>
</head>
<body>
<div>
<label><input type="checkbox" name="colorCheckbox" value="check"> Click on the check box</label>
</div>
<div class="check box">
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
</body>
</html>

Output :-

How to show Hide Elements By click on checkbox in Jquery
Personal information: First name:

Last name:







Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link