DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery實現checkbox 全選/全不選的通用寫法
jquery實現checkbox 全選/全不選的通用寫法
編輯:JavaScript綜合知識     

 本篇文章主要是對jquery實現checkbox 全選/全不選的通用寫法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

 代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>     <script type="text/javascript">         //name 是html表單專用於區別各組 chechbox 的屬性, 不要用id(必須唯一)或者其它屬性         function getValues() {             var aV = getCheckboxValues("a");             var bV = getCheckboxValues("b");             var cV = getCheckboxValues("c");               var result = "a組選中值: " + (aV=="" ? "未選中任何值" : aV) + "n" +                 "b組選中值: " + (bV == "" ? "未選中任何值" : bV) + "n" +                 "c組選中值: " + (cV == "" ? "未選中任何值" : cV);               alert(result);         }           function getCheckboxValues(name) {             return $(":checkbox[name="+name+"]:checked").map(function(){                   return $(this).val();              }).get().join(",");         }           function chkAll(obj) {             var name = $(obj).attr("name");             //也許你覺得我寫得太復雜, 但jquery 版本眾多, 可以學點東西總是好的             //1. jquery 1.6 以上             //$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));             //2. jquery 1.6 以下             //$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));             //3. 通用寫法             $(":checkbox[name=" + name.substring(0, 1) + "]").each(function () {                 this.checked = obj.checked;             });         }     </script> </head> <body>     <div >         <span>第1組(a):<input type="checkbox" name="aAll" onclick="chkAll(this)" />全選/全不選</span>         <input type="checkbox" name="a" value="a1" checked="checked" />a1         <input type="checkbox" name="a" value="a2" checked="checked"  />a2         <input type="checkbox" name="a" value="a3" />a3         <input type="checkbox" name="a" value="a4" />a4<br />           <span>第2組(b):<input type="checkbox" name="bAll" onclick="chkAll(this)" />全選/全不選</span>         <input type="checkbox" name="b" value="b1" />b1         <input type="checkbox" name="b" value="b2" checked="checked" />b2         <input type="checkbox" name="b" value="b3" checked="checked"  />b3         <input type="checkbox" name="b" value="b4" />b4<br />           <span>第3組(c):<input type="checkbox" name="cAll" onclick="chkAll(this)" />全選/全不選</span>         <input type="checkbox" name="c" value="c1" />c1         <input type="checkbox" name="c" value="c2" />c2         <input type="checkbox" name="c" value="c3" checked="checked" />c3         <input type="checkbox" name="c" value="c4" checked="checked"  />c4<br />           <br />         <input type="button" value="查找每組的選中的值" onclick="getValues()" />     </div> </body> </html>    
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved