Collection of jQuery operation codes for forms_jquery

Change the focus style of the text box

Copy the code The code is as follows:

Basic personal information

< label for="username">Name:

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

Copy code The code is as follows:

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

Then add get and lose focus events for the text box

Copy code The code is as follows:

$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});

The function of multi-line text box
Set the minimum and maximum height of the comment box:

Copy code The code is as follows:

Zoom in
Zoom out

< ;div>
Multi-line text box height changes

< /div>

1. After clicking the "Enlarge" button, if the height of the comment box is less than 500px, 50px will be added to the original height;
2. After clicking the "Reduce" button, if the height of the comment box is greater than 50px, it will be reduced by 50px based on the original height;

Copy code The code is as follows:

$(function(){
var $comment = $('#comment'); //Get the comment box
$( '.bigger').click(function(){
if(!$comment.is(":animated")){ //Determine whether it is animated
if($comment.height() < 500 ){
$comment.animate({height : " =50"}, 400);
}
}
})
$('.smaller').click(function( ){
if(!$comment.is(":animated")){ //Determine whether it is animated
if($comment.height() > 50){
$comment.animate( {height : "-=50"}, 400);
}
}
})
})

Changes in scroll bar height
Control more Changes to the scroll bar of the line text box:

Copy code The code is 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: Select all check boxes, invert selection, and unselect all operations.

Copy code The code is as follows:

What is your favorite sport?

Football
Basketball
Badminton
Pong Tennis Ball




//Select all
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr( 'checked',true);
});
//Check none
$("#CheckedNo").click(function(){
$('[name=items]: checkbox').attr('checked',false);
});
//Inverse selection
$("#CheckedNo").click(function(){
$('[name =items]:checkbox').each(function(){
this.checked = !this.checked;
}));
//Submit button
$("#send") .click(function(){
var str = "What you selected is: n";
$('[name=items]:checkbox:checked').each(function(){
str = $(this).val() 'rn'})
alert( str);
);