所需样式（table.css）
table{border: #249bdb 1px solid;width:500px;border-collapse:collapse;
}
table td{border: #249bdb 1px solid;padding: 5px;
}
table th{border: #249bdb 1px solid;padding: 5px;background-color:rgb(180,180,180);
}.one{background-color:#ff80ff;
}.two{background-color: #ffff80;
}
.over{background-color: #fff;/*font-size:20px; */
}
checkbox对象引例
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>DOM--有关复选框组件的演示</title><script type="text/javascript">function getSum(){var sum=0;var collItemNodes = document.getElementsByName("item");for(var x=0; x<collItemNodes.length; x++){if(collItemNodes[x].checked){sum = sum + parseInt(collItemNodes[x].value);}}//alert("sum="+sum);//把金额数据显示到span中var oSpan = document.getElementById("sumId");var strSum = sum+"元";oSpan.innerHTML=strSum.fontcolor("red").bold();}function checkAll(allChkNode){var collItemNodes = document.getElementsByName("item");for (var x = 0; x < collItemNodes.length; x++) {collItemNodes[x].checked = allChkNode.checked;}}</script></head><body><h3>复选框用法演示</h3>商品列表:<br/><input type="checkbox" name="allItem" οnclick="checkAll(this);"/>全选<br/><input type="checkbox" name="item" value="200"/>风扇:200元<br/><input type="checkbox" name="item" value="2000"/>电视:2000元<br/><input type="checkbox" name="item" value="3000"/>电脑:3000元<br/><input type="checkbox" name="item" value="1200"/>手机:1200元<br/><input type="button" value="总金额是" οnclick="getSum();" /><span id="sumId"></span></body></html>
checkbox对象实例模拟QQ邮箱
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>DOM--有关复选框组件的演示--邮件列表</title><link rel="stylesheet" type="text/css" href="table.css" /><script type="text/javascript">function trColor(){//给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展var oTableNode = document.getElementById("tbData");var collTrNodes = oTableNode.rows; //获得所有行集合//遍历所有行(除第一行的表头外)，分别设置类样式one,twofor(var x=1; x<collTrNodes.length; x++){if(x%2==1){collTrNodes[x].className="one";}else{collTrNodes[x].className="two";}}}function trEvent(){//给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展var oTableNode = document.getElementById("tbData");var collTrNodes = oTableNode.rows; //获得所有行集合//遍历所有行(除第一行的表头外)，分别设置类样式one,twofor(var x=1; x<collTrNodes.length; x++){var oldName;collTrNodes[x].οnmοuseοver=function(){oldName = this.className;this.className="over";};collTrNodes[x].οnmοuseοut=function(){this.className=oldName;};}}onload = function(){trColor(); //这种方式可以传参trEvent();mailChkEvent(); //给所有邮件复选框添加鼠标单击事件}上面的功能是昨天讲的///function checkAll(node){var collChkMails = document.getElementsByName("mail");for(var i=0; i<collChkMails.length; i++){collChkMails[i].checked = node.checked;}var collChkAlls = document.getElementsByName("all");for(var i=0; i<collChkAlls.length; i++){if(collChkAlls[i]!=node){collChkAlls[i].checked = node.checked;}}}function mailChkEvent(){var collChkMails = document.getElementsByName("mail");for(var i=0; i<collChkMails.length; i++){collChkMails[i].onclick = chkAllSet;}}//设置All复选框function chkAllSet(){//统计邮件复选框勾选的个数var n=0;var collChkMails = document.getElementsByName("mail");for(var i=0; i<collChkMails.length; i++){if(collChkMails[i].checked){n++;}}//alert(n);var collChkAlls = document.getElementsByName("all");if(n==0){//全部取消for (var i = 0; i < collChkAlls.length; i++) {collChkAlls[i].checked=false;collChkAlls[i].indeterminate =false;}}else if(n==collChkMails.length){//全选for (var i = 0; i < collChkAlls.length; i++) {collChkAlls[i].checked=true;collChkAlls[i].indeterminate =false;}}else{//部分选for (var i = 0; i < collChkAlls.length; i++) {collChkAlls[i].indeterminate =true;}}}//按钮勾选的功能function checkAllByBtn(n){var collChkMails = document.getElementsByName("mail");for (var i = 0; i < collChkMails.length; i++) {if(n>1){//反选collChkMails[i].checked = !collChkMails[i].checked;}else{//全选 或 全取消collChkMails[i].checked = n;}}chkAllSet();}//删除勾选的邮件function delMails(){//防护一下if( !confirm("你真的要删除所选邮件吗?") ){return;}var collChkMails = document.getElementsByName("mail");//从前往后删除时i要回退/*for (var i = 0; i < collChkMails.length; i++) {if(collChkMails[i].checked){//用while往上查找当前复选框所在的<tr>对象var oTrNode = collChkMails[i];while(oTrNode.nodeName!="TR"){oTrNode = oTrNode.parentNode;}//删除oTrNode --找父亲删儿子oTrNode.parentNode.removeChild(oTrNode);i--;//※小心※因为表格在动态变化，所在i要回退一下。}}*///倒着删，不用回退for (var i = collChkMails.length-1 ; i>=0 ; i-- ) {if(collChkMails[i].checked){//用while往上查找当前复选框所在的<tr>对象var oTrNode = collChkMails[i];while(oTrNode.nodeName!="TR"){oTrNode = oTrNode.parentNode;}//删除oTrNode --找父亲删儿子oTrNode.parentNode.removeChild(oTrNode);}}}</script></head><body><h3>复选框用法演示--邮件列表</h3><table id="tbData"><tr><th><input type="checkbox" name="all" οnclick="checkAll(this);">全选</th> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr><tr> <td><input type="checkbox" name="mail"></td> <td>张三</td> <td>22</td> <td>湖南</td> </tr><tr> <td><input type="checkbox" name="mail"></td> <td>李四</td> <td>12</td> <td>江西</td> </tr><tr> <td><input type="checkbox" name="mail"></td> <td>Jack</td> <td> 6</td> <td>福建</td> </tr><tr> <td><input type="checkbox" name="mail"></td> <td>Rose</td> <td>32</td> <td>湘江</td> </tr><tr> <td><input type="checkbox" name="mail"></td> <td>Tom</td> <td>23</td> <td>浙江</td> </tr><tr> <td><input type="checkbox" name="mail"></td> <td>Mike</td> <td>22</td> <td>江苏</td> </tr><tr> <td><input type="checkbox" name="mail"></td> <td>刘备</td> <td>18</td> <td>潜江</td> </tr><tr> <td><input type="checkbox" name="all" οnclick="checkAll(this);">全选</td> <td colspan="3"> <input type="button" value="全选" οnclick="checkAllByBtn(1);"><input type="button" value="清空" οnclick="checkAllByBtn(0);"><input type="button" value="反选" οnclick="checkAllByBtn(2);"> <input type="button" value="删除" οnclick="delMails();"></td></tr></table></body></html>
radio对象实例1
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>DOM--有关单选按钮的演示</title><script type="text/javascript">function showContent(oRadioNode){var oDivNode = document.getElementById("contentid");/*if(oRadioNode.value=='yes'){oDivNode.style.display="block";}else{oDivNode.style.display="none";}*///用with语法简化一下上面那段代码with(oDivNode.style){if(oRadioNode.value=='yes'){display="block";}else{display="none";}}}</script></head><body><h3>单选按钮组件用法演示</h3><fieldset style="width:200px;"><legend>您要参与问卷调查吗?</legend><input type="radio" name="wenjuan" value="yes" οnclick="showContent(this);">是<input type="radio" name="wenjuan" value="no" checked="checked" οnclick="showContent(this);">否</fieldset><div id="contentid" style="display:none;background:red;width:300px;">问卷调查内容:<br/>您的姓名:<input type="text" name="name"><br/>您的电话:<input type="text" name="tel"><br/></div></body></html>
radio对象实例2
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>DOM--有关单选按钮的演示</title><style type="text/css">ul{list-style: none;margin:0px;padding:5px;}.close{display: none;}.open{display: block;}</style><script type="text/javascript">function showResult(){//获取所有的单选框组件var collNo1RdNodes = document.getElementsByName("no1");var val;var flag=false;for( x in collNo1RdNodes){if(collNo1RdNodes[x].checked){/*虽然js也有try-catch捕捉异常。但这里不用，因为js的parseInt()不会抛出异常，如果解析出错返回的是"NaN"值try{parseInt(collNo1RdNodes[x].value)}catch(e){alert(e);}*/flag=true;val = parseInt(collNo1RdNodes[x].value)break;}}if(!flag){ //falsedocument.getElementById("erroInfo").innerHTML="设有任何答案被选中".fontcolor("red");return;}document.getElementById("erroInfo").innerHTML="";if(val>=1 && val<=3){document.getElementById("res1").style.display="block";document.getElementById("res2").style.display="none";}else{document.getElementById("res2").style.display="block";document.getElementById("res1").style.display="none";}}</script></head><body><h2>性格测试</h2><h3>第一题:</h3> <span>您最喜欢的水果是什么?</span><ul><li><input type="radio" name="no1" value="1">葡萄</li><li><input type="radio" name="no1" value="2">桃子</li><li><input type="radio" name="no1" value="3">西瓜</li><li><input type="radio" name="no1" value="4">火龙果</li><li><input type="radio" name="no1" value="5">椰子</li></ul><input type="button" value="查看测试结果" οnclick="showResult();" /><span id="erroInfo"></span><div id="res1" class="close">1-3分: 您的性格内向，建议.....</div><div id="res2" class="close">4分以上: 您的性格外向，建议.....</div></body></html>