本文實例講述了jQuery實現遍歷復選框的方法。分享給大家供大家參考,具體如下:
1、問題背景:
這里有10個復選框,根據選擇的復選框獲取其值,并將其值用“――”連接,插入到div中
2、實現代碼:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>遍歷復選框</title> <script type="text/javascript" src="jquery-1.7.2.min.js" ></script> <script> $(document).ready(function(){ $("#btn").click(function(){ var str = ""; $("input[name='ckb']").each(function(){ if($(this).is(":checked")) { str += "――" + $(this).val(); } }); $("#txt").html(str); }); }); </script> </head> <body> <div> <input type="checkbox" name="ckb" value="1" />1 <input type="checkbox" name="ckb" value="2" />2 <input type="checkbox" name="ckb" value="3" />3 <input type="checkbox" name="ckb" value="4" />4 <input type="checkbox" name="ckb" value="5" />5 <input type="checkbox" name="ckb" value="6" />6 <input type="checkbox" name="ckb" value="7" />7 <input type="checkbox" name="ckb" value="8" />8 <input type="checkbox" name="ckb" value="9" />9 <input type="checkbox" name="ckb" value="10" />10<br> <input type="button" id="btn" value="遍歷"/> <div id="txt"></div> </div> </body></html>3、運行效果圖:

更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery form操作技巧匯總》、《jQuery操作json數據技巧匯總》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答