萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現checkbox 全選/全不選的通用寫法
jquery實現checkbox 全選/全不選的通用寫法
本篇文章主要是對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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved