本文實例講解了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程序設計有所幫助。
新聞熱點
疑難解答
