基於jQuery的表單操作
阿新 • • 發佈：2018-08-21
content 瀏覽器 area show legend ins 並不是 彌補 span
1，文本框的聚焦和失焦
在對文本框進行操作時，通常為了提升用戶體驗，是用戶的操作得到及時的反饋，會在文本框獲得焦點時，讓其顏色改變，然後在失去焦點時恢復為原來的樣式，一般情況下，我們可以通過css的偽類選擇器實現這個功能：
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> <style type="text/css"> body{ font:normal 12px/17px Arial; } div{ padding:2px; } input, textarea { width: 12em; border: 1px solid #888; } input:focus,textarea:focus{ border: 1px solid #f00; background: #fcc; } .focus { border: 1px solid #f00; background: #fcc; } </style> </head> <body> <form action="" method="post" id="regForm"> <fieldset> <legend>個人基本信息</legend> <div> <label for="username">名稱:</label> <inputid="username" type="text" /> </div> <div> <label for="pass">密碼:</label> <input id="pass" type="password" /> </div> <div> <label for="msg">詳細信息:</label> <textarea id="msg" rows="2" cols="20"></textarea> </div> </fieldset> </form> </body> </html>
我們可以看到，瀏覽器對偽類選擇器的支持並不是很好，特別是在IE瀏覽器中。此時，我們可以通過jQuery來彌補這種不足。
在上面的程序中，加入下面的代碼：
<script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); }) </script>
這樣，通過jQuery來解決瀏覽器的支持，就可以在各種瀏覽器中得到滿意的效果了。
2，復選框的全選和反選
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <form method="post" action=""> 你愛好的運動是？ <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="籃球"/>籃球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/> <input type="button" id="CheckedAll" value="全 選"/> <input type="button" id="CheckedNo" value="全不選"/> <input type="button" id="CheckedRev" value="反 選"/> <input type="button" id="send" value="提 交"/> </form> <script type="text/javascript"> $(function(){ //全選 $("#CheckedAll").click(function(){ $(‘[name=items]:checkbox‘).attr(‘checked‘, true); }); //全不選 $("#CheckedNo").click(function(){ $(‘[type=checkbox]:checkbox‘).attr(‘checked‘, false); }); //反選 $("#CheckedRev").click(function(){ $(‘[name=items]:checkbox‘).each(function(){ this.checked=!this.checked; }); }); //輸出值 $("#send").click(function(){ var str="你選中的是：\r\n"; $(‘[name=items]:checkbox:checked‘).each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }) </script> </body> </html>
在上面的代碼中實現了最基本的全選，反選等操作，通過控制元素的checked屬性來控制復選框的選擇狀態，此時是分別設置了三種按鈕並分別綁定相應的事件，但是在實際操作中，經常是通過一個復選框來控制全選和全不選的。
當只有一個復選框控制全選個全不選時，假設此復選框id為CheckedAll，我們需要將該復選框與復選框組進行聯系起來，當復選框組裏有一個或者多個沒有選中時，需要取消復選框CheckedAll的選中狀態，如果復選框組都被選中，則復選框CheckedAll需要自動選中，實現的具體思路如下：
- 對復選框組綁定單擊事件
- 定義一個flag變量，默認為true
- 循環復選框組，當有沒被選中的項時，則把變量flag的值設置為false
- 根據變量flag的值來設置復選框CheckedAll的選中狀態：flag為true則選中，否則不選中
具體代碼如下：
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <form> 你愛好的運動是？<input type="checkbox" id="CheckedAll" />全選/全不選<br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="籃球"/>籃球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/> <input type="button" id="send" value="提 交"/> </form> <script> $(function(){ //全選和全不選 $("#CheckedAll").click(function(){ if(this.checked){ //如果當前點擊的多選框被選中 $(‘input[type=checkbox][name=items]‘).attr("checked", true ); }else{ $(‘input[type=checkbox][name=items]‘).attr("checked", false ); } }); $(‘input[type=checkbox][name=items]‘).click(function(){ var flag=true; $(‘input[type=checkbox][name=items]‘).each(function(){ if(!this.checked){ flag = false; } }); if( flag ){ $(‘#CheckedAll‘).attr(‘checked‘, true ); }else{ $(‘#CheckedAll‘).attr(‘checked‘, false ); } }); //輸出值 $("#send").click(function(){ var str="你選中的是：\r\n"; $(‘input[type=checkbox][name=items]:checked‘).each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }) </script> </body> </html>
雖然上面我們實現了想要的效果，但是代碼並不是最簡的，首先，全選與全不選，當復選框CheckedAll被選中時，說明是全選，復選框組的都被選中，當復選框CheckedAll取消選中，表示全不選，則復選框組都沒選中，也就是說，復選框組所有的值在全選和全不選時，選中狀態都同復選框CheckedAll的值是相同的；其次，對於復選框組綁定的單擊事件，我們只需要判斷復選框組中的復選框總數是否與選中的復選框數量相同就能判斷是否是全選了，因此，我們可以優化上面js部分的代碼如下：
<script> $(function(){ //全選和全不選 $("#CheckedAll").click(function(){ $(‘[name=items]:checkbox‘).attr("checked", this.checked ); }); $(‘[name=items]:checkbox‘).click(function(){ var $tmp=$(‘[name=items]:checkbox‘); $(‘#CheckedAll‘).attr(‘checked‘,$tmp.length==$tmp.filter(‘:checked‘).length); }); //輸出值 $("#send").click(function(){ var str="你選中的是：\r\n"; $(‘[name=items]:checkbox:checked‘).each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }); </script>
3，表單內容過濾
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <div> <br/> 篩選 <input id="filterName" /> <br/> </div> <table> <thead> <tr><th>姓名</th><th>性別</th><th>地址</th></tr> </thead> <tbody> <tr><td>aaa</td><td>男</td><td>杭州</td></tr> <tr><td>bbb</td><td>女</td><td>寧波</td></tr> <tr><td>ccc</td><td>男</td><td>長沙</td></tr> <tr><td>ddd</td><td>男</td><td>杭州</td></tr> <tr><td>eee</td><td>男</td><td>杭州</td></tr> <tr><td>fff</td><td>女</td><td>長沙</td></tr> <tr><td>ggg</td><td>男</td><td>寧波</td></tr> <tr><td>hhh</td><td>女</td><td>寧波</td></tr> <tr><td>iii</td><td>男</td><td>長沙</td></tr> </tbody> </table> </body> </html>
在上面的表單中，我們希望每次輸入關鍵後，頁面只剩下與關鍵字相關的內容，此時，我們可以通過contains選擇器結合filter()篩選方法對表單內容進行過濾。因此，我們可以為表單添加下面的js代碼：
<script type="text/javascript"> $(function(){ $("#filterName").keyup(function(){ $("table tbody tr") .hide() .filter(":contains(‘"+( $(this).val() )+"‘)") .show(); }).keyup(); }) </script>
基於jQuery的表單操作