Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Displaying div on radio check using jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 368
    Comment on it

    Hiding/Showing div on checking radio:

    We can easily hide or display a div by checking the radiobox options using jQuery. We can do this by checking radio options attribute and according to attribute we can hide or show a div.


    <!DOCTYPE html>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <script src=""></script>
      <style type="text/css">
      textarea{border:2px solid #333;width:340px;border-radius:5px;margin-top:10px;}
     	<div class="form-group">
    					<label class="col-sm-5 control-label">Check either Yes or No</label>
    					<div class="col-sm-7">
    						<div class="radio  radiobtnBox">
    						<input name="data[User][certificate]"  value="Y" class="radio1" required="required" aria-required="true" autocomplete="off" type="radio"><span>Yes</span>
    						<input name="data[User][certificate]"  value="N" class="radio1" required="required" aria-required="true" autocomplete="false" type="radio"><span>No</span>
    						<div  aria-required="true">
    							<textarea class="form-control radio_check" cols="30" rows="6"  required="required" aria-required="true" style="display: block;"></textarea>
    <script type="text/javascript">
    	 $(".radio1 ").click(function(){

    In the above example we are displaying the textarea when user will check YES option and hiding when user will select NO with the help of attribute value.

    Working example:

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: