jquery implementation automatically displays and hides form _jquery based on type

jquery implementation of the form according to the radio button for the animation of the field of the switch, wrote yesterday, feeling more than the beginner wrote Js/jquery has made great progress. It is possible to streamline the code when maximizing extensibility.

Html

Copy Code code as follows:

<div class= "Control-group" >
<label class= "Control-label" > Type:</label>
<div class= "Controls Control-row-auto" id= "type" >
</div>
<span class= "Auxiliary-text" ></span>
</div>
<div class= "Control-group CType ctype1 ctype2" >
<label class= "Control-label" > Column template:</label>
<div class= "Controls" >
<select name= "COLUMN_TPL" class= "Input" >
</select>
</div>
<span class= "Auxiliary-text" ></span>
</div>
<div class= "Control-group CType Ctype1" >
<label class= "Control-label" > Article Template:</label>
<div class= "Controls" >
<select name= "ARTICLE_TPL" class= "Input" >
</select>
</div>
<span class= "Auxiliary-text" ></span>
</div>
<input type= "hidden" name= "TPL" id= "TPL" value= ""/>
<div class= "Control-group CType Ctype3" style= "Display:none;" >
<label class= "Control-label" ><s>*</s> column links:</label>
<div class= "Controls" >
<input name= "url" type= "text" class= "Input-large" data-rules= "{required:true,minlength:1,maxlength:30}" >
</div>
<span class= "Auxiliary-text" > Internal link Format: module/Controller/method ..., external link format:http://../../</span>
</div>

Js

Copy Code code as follows:

Automatically show and hide forms based on type
var input_type=$ (' input[name=type] ');
function Typechangehandle () {
var ctypes=$ ('. CType ');
var type=$ (this). Val ();
var hidectypes=ctypes.filter (': Not (. CType ' +type+ ') '). Slideup (500,function () {
$ ('. CType ' +type). Slidedown (500);
});
}
Typechangehandle.apply (Input_type);
Input_type.on (' Change ', typechangehandle);
Input_type=null;

The above mentioned is the entire content of this article, I hope you can enjoy.