示例代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>删除表单中复选框控件</title> <mce:script language="javascript"><!-- mydel = function() //(循环)移除选中的复选框 { var N = 0; //用于新数组的下标 var cks = document.getElementsByName("ck"); //获取复选框(数组) var temps = new Array(); //声明一个数组 for(i=0;i<cks.length;i++) { if(cks[i].checked) //如果该复选框被选中 { temps[N]=cks[i]; //将选中的复选框保存到新的数组集合中 N++; //下标自相加1 } } for(j=0;j<temps.length;j++) { //使用parentElement属性在IE中也可以被执行的但在Firefox中就不行 var parent = temps[j].parentNode; //获得复选框的父节点(因为要移除复选框后面的“游戏”) //parent.removeNode(true); //如果是这样写只能在IE可以被执行,其他浏览器不兼容的。 var bodyParent = parent.parentNode; //获得复选框的父节点的父节点 bodyParent.removeChild(parent); /*再利用复选框的爷节点来移除复选框的父节点(因为该方法只能移除某个节点下的子节点) 这样(移除子节点)才能在IE、Firefox、Apple、google浏览器中兼容*/ } } selectAll = function() //全选的方法 { var cks = document.getElementsByName("ck"); //获取复选框(数组) for(i=0;i<cks.length;i++) cks[i].checked = true; //将全部复选框选中 } noAll = function() //全不选的方法 { var cks = document.getElementsByName("ck"); //获取复选框(数组) for(i=0;i<cks.length;i++) cks[i].checked = false; //将全部复选框不选中 } fanxuan_china = function() //反选的方法 { var cks = document.getElementsByName("ck"); //获取复选框(数组) for(i=0;i<cks.length;i++) cks[i].checked = !cks[i].checked; //将全部复选框的选中(或不选中)状态反转过来 } init = function() //初始化方法 { var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); var btn4 = document.getElementById("btn4"); btn1.onclick = mydel; //绑定删除的方法 btn2.onclick = selectAll; //绑定全选 btn3.onclick = noAll; //绑定全不选 btn4.onclick = fanxuan_china; //绑定反选 } window.onload = init; //页面加载时绑定初始化方法 // --></mce:script> </head> <body> 我的爱好:<br /><br /> <span id="s1"><input type="checkbox" id="ck1" name="ck" value="1"/>游戏 </span> <span id="s2"><input type="checkbox" id="ck1" name="ck" value="2"/>看电影 </span> <span id="s3"><input type="checkbox" id="ck1" name="ck" value="3"/>蓝球 </span> <span id="s4"><input type="checkbox" id="ck1" name="ck" value="4"/>下棋 </span> <span id="s5"><input type="checkbox" id="ck1" name="ck" value="5"/>书法 </span><br /><br /> <input type="button" id="btn1" value="删除选中的项"/> <input type="button" id="btn2" value="全选"/> <input type="button" id="btn3" value="全不选"/> <input type="button" id="btn4" value="反选"/> </body> </html>