本文實例講解了javascript實現checkbox復選框的詳細代碼,分享給大家供大家參考,具體內容如下
效果圖:
具體代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script type="text/javascript"> function select_all(obj) { //取得由所有hobby構成的一個數組對象 //如果表單中,存在多個同名的name,將產生一個數組 var arr = document.form1.hobby; if(obj.checked) { //為true執行代碼 for(var i=0;i<arr.length;i++) { arr[i].checked = true; } }else { //為false執行代碼 for(var i=0;i<arr.length;i++) { arr[i].checked = false; } } } function select_no_all() { //取得所有的hobby對象 var arr = document.form1.hobby; for(var i=0;i<arr.length;i++) { if(arr[i].checked) { //如果選中,則取消 arr[i].checked = false; }else { //如果沒選中,則選中 arr[i].checked = true; } } } </script> </head> <body> <form name="form1"> <fieldset> <legend>選擇你感興趣的類別</legend> <input type="checkbox" name="hobby" value="音樂" />音樂 <input type="checkbox" name="hobby" value="看書" />看書 <input type="checkbox" name="hobby" value="體育" />體育 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="電腦" />電腦<br /> <input type="checkbox" name="hobby" value="小說" />小說 <input type="checkbox" name="hobby" value="文學" />文學 <input type="checkbox" name="hobby" value="動漫" />動漫 <input type="checkbox" name="hobby" value="經濟" />經濟 <input type="checkbox" name="hobby" value="電影" />電影<br /> <input type="checkbox" name="hobby" value="美術" />美術 <input type="checkbox" name="hobby" value="管理" />管理 <input type="checkbox" name="hobby" value="歷史" />歷史 <input type="checkbox" name="hobby" value="旅游" />旅游 <input type="checkbox" name="hobby" value="戲劇" />戲劇 </fieldset> <input type="checkbox" onclick="select_all(this)" value="全選" />全選 <input type="checkbox" onclick="select_no_all()" value="反選" />反選 </form> </body> </html>
希望本文所述對大家學習javascript程序設計有所幫助。