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
    • 69
    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.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <style type="text/css">
      textarea{border:2px solid #333;width:340px;border-radius:5px;margin-top:10px;}
      </style>
    </head>
    <body>
     	<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>
    						</div>
    						
    					</div>
    				
    	</div>
    </body>
    <script type="text/javascript">
    	$(".radio_check").hide();
    	 $(".radio1 ").click(function(){
    
    
    	        if($(this).attr("value")=="Y"){
    
    	            $(".radio_check").css("display","block");
    
    	        }
    	        else{
    	        	 $(".radio_check").hide();
    	        }
    
    	    });
    </script>
    </html>

    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: https://jsfiddle.net/66g52eyg/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: