jQueryのフォームに対する操作コードの集合

テキストボックスのフォーカスのスタイルを変更する

 
  
 
  
 
  
      
 
  
 
  
  ： 
  
 
  
 
  
 
  
 
  
 
 

まずcssにfocusというクラス名のスタイルを追加します.
cssコードは次のとおりです.

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

次に、テキストボックスにフォーカスイベントの取得と失われたイベントを追加します.

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

複数行テキスト・ボックスの役割
コメントボックスの最小高さと最大高さを設定します.

1、「拡大」ボタンをクリックすると、コメントボックスの高さが500 px未満の場合、元の高さに基づいて50 px増加する.
2.「縮小」ボタンをクリックすると、コメントボックスの高さが50 pxより大きい場合、元の高さに基づいて50 pxを減少する.

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

スクロールバーの高さの変化
複数行のテキスト・ボックスのスクロール・バーの変更を制御します.

 
  
$(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); 
  
}) 
  
}) 
  
 
 

チェックボックスの適用
基本的な適用:チェックボックスをすべて選択し、逆選択し、すべて選択しません.

 
  
 
  
      ？
 
  
   
  
   
  
    
  
    
  
 
  
 
  
 
  
 
  
//   
  
$("#CheckedAll").click(function(){ 
  
$('[name=items]:checkbox').attr('checked',true); 
  
}); 
  
//    
  
$("#CheckedNo").click(function(){ 
  
$('[name=items]:checkbox').attr('checked',false); 
  
}); 
  
//   
  
$("#CheckedNo").click(function(){ 
  
$('[name=items]:checkbox').each(function(){ 
  
this.checked = !this.checked; 
  
})); 
  
//     
  
$("#send").click(function(){ 
  
var str = "     ：\r
"; 
  
$('[name=items]:checkbox:checked').each(function(){ 
  
str += $(this).val()+'\r
'}) 
  
alert(str); 
  
);