jquery's action code collection for a form _jquery

Change the style of the text box to get focus

Copy Code code as follows:

<form action= "#" method= "POST" id= "RegForm" >
<fieldset>
<legend> Personal basic Information </legend>
<div>
<label for= "username" > name:</label>
<input id= "username" type= "text" >
</div>
</fieldset>
</form>

First, add a style with the class name focus in the CSS.
The CSS code is as follows:

Copy Code code as follows:

. focus {
border:1px solid #f00;
Background: #fcc;
}

Then add the get and lose focus event for the text box

Copy Code code as follows:

$ (function () {
$ (": Input"). focus (function () {
$ (this). AddClass ("Focus");
}). blur (function () {
$ (this). Removeclass ("Focus");
});
});

The role of multiline text boxes
To set the minimum height and maximum height of a comment box:

Copy Code code as follows:

<form>
<div class= "MSG" >
<div class= "Msg_caption" >
<span class= "bigger" > Amplification </span>
<span class= "Smaller" > Shrink </span>
</div>
<div>
<textarea id= "comment" rows= "8" cols= "> Multiline text box height change </textarea>
</div>
</div>
</form>

1, when the "Zoom" button, if the comment box height is less than 500px, then the original height of the base to increase the 50px;
2. When clicking the "Zoom Out" button, if the comment box height is greater than 50px, then reduce 50px on the basis of the original height;

Copy Code code as follows:

$ (function () {
var $comment = $ (' #comment '); Get Comment Box
$ ('. Bigger '). Click (function () {
if (! $comment. Is (": Animated")) {//To determine whether the animation
if ($comment. Height () < 500) {
$comment. Animate ({height: "+=50"}, 400);
}
}
})
$ ('. smaller '). Click (function () {
if (! $comment. Is (": Animated")) {//To determine whether the animation
if ($comment. Height () > 50) {
$comment. Animate ({height: "-=50"}, 400);
}
}
})
})

Changes in the height of the scroll bar
To control the changes in multiline text box scroll bars:

Copy Code code as follows:

$ (function () {
var $comment = $ (' #comment ');
$ ('. up '). Click (function () {
if ($comment. Is (": Animated")) {
$comment. Animate ({scrolltop: "-=50"}, 400);
}
})
$ ('. Down '). Click (function () {
if ($comment. Is (": Animated")) {
$comment. Animate ({scrolltop: "+=50"}, 400);
})
})

Application of check boxes
Basic application: Check the box to select all, the election, all the operation.

Copy Code code as follows:

<form>
The sport you love? <br/>
<input type= "checkbox" name= "Items" value= "Football"/> Football
<input type= "checkbox" name= "items" value= "basketball"/> Basketball
<input type= "checkbox" name= "Items" value= "Badminton"/> Badminton
<input type= "checkbox" name= "Items" value= "Table tennis"/> Pong ball
<input type= "button" id= "Checkedall" value= "Select All"/>
<input type= "button" id= "Checkedno" value= "all do not choose"/>
<input type= "button" id= "Checkedrev" value= "anti-election"/>
<input type= "button" id= "send" value= "Submit"/>
Select All
$ ("#CheckedAll"). Click (function () {
$ (' [Name=items]:checkbox '). attr (' checked ', true);
});
No choice.
$ ("#CheckedNo"). Click (function () {
$ (' [Name=items]:checkbox '). attr (' checked ', false);
});
Anti-election
$ ("#CheckedNo"). Click (function () {
$ (' [Name=items]:checkbox '). each (function () {
this.checked =!this.checked;
}));
Submit button
$ ("#send"). Click (function () {
var str = "You selected is: \ r \ n";
$ (' [name=items]:checkbox:checked '). each (function () {
STR + $ (this). Val () + ' \ r \ n '})
alert (str);
);