Jquery學習之路(一) 實現checkbox全選方法
昨天早上有寫到怎么利用Jquery實現全選
根據大家的意見對程序中一些寫法不好的地方進行了修改，也是本人水平有限，存在各種考慮不到的地方。
文章最后我提出了一個問題，要寫一個通用的方法來調用，於是就有了現在的這篇文章，晚上回到家，我就寫出了效果
下面的例子可以供大家討論學習，如果覺得不錯也可以直接應用到項目中。
1：為什么要寫這個方法
網上實現一句話全選全不選的有很多，但是好像都忽略了一個問題，全選的checkbox可以控制下面的子checkbox，但是下面的子checkbox應該也可以控制上面的全選，這樣就有了我的這個方法。
2：開發過程：要實現通用就要解決2個問題，怎么分組，怎么判斷組里面哪個checkbox為全選，我想了想，覺得用name分組可以，
用class來判斷是否是需要全選的checkbox組。先找到所有class為需要全選的，再找出name屬性，根據name屬性就可以找到其他的子checkbox,只要找到元素就可以進行操作了
3：下載地址：實現checkbox全選方法.zip
4：文件，下面是我實現的js，保存為xs_checkbox_all.js
//**************************************************************************************** //作者：輕狂書生 //博客地址：http://www.cnblogs.com/xiaoshuai1992 //create: 2014/1/15 //功能：實現checkbox的智能全選 //使用方法：引用jquery,設置要全選的checkbox 組name一樣，全選的checkbox設置class為下面變量xsChk //***************************************************************************************** $(document).ready(function () { var xsChk = "xsChk";//定義的樣式 var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定義此樣式的checkbox $(xsChkAll).each(function () { var name = $(this).attr("name"); name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全選框下面的子checkbox $(this).click(function () { $(name).attr("checked", $(this)[0].checked); }) var xschk = $(this); $(name).click(function () { var IAll = $(name).length; //此子項目下所有checkbox的個數 var IChk = $(name + ":checked").length; //此子項目下所有勾選checkbox的個數 var isAllChecked = true; //是否是全選 if (IAll != IChk) { isAllChecked = false; } $(xschk).attr("checked", isAllChecked); }); }); });
頁面使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript"> </script> <script src="xs_checkbox_all.js" type="text/javascript"></script> <fieldset> <legend>全選one</legend> <input type="checkbox" class="xsChk" name="chk" /> 全選 <div> <input type="checkbox" name="chk" /> 1<br /> <input type="checkbox" name="chk" /> 2<br /> <input type="checkbox" name="chk" /> 3<br /> <input type="checkbox" name="chk" /> 4<br /> </div> </fieldset> <fieldset> <legend>全選two</legend> <input type="checkbox" class="xsChk" name="chk1" /> 全選2 <div> <input type="checkbox" name="chk1" /> 11<br /> <input type="checkbox" name="chk1" /> 22<br /> <input type="checkbox" name="chk1" /> 33<br /> <input type="checkbox" name="chk1" /> 44<br /> </div> </fieldset> </body> </html>
可以達到效果，如果有什么優化的地方，請大家提出，我會做的更好,謝謝大家了
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。