版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34928644/article/details/80972602
所需样式（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" onclick="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="总金额是" onclick="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,two
for(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,two
for(var x=1; x<collTrNodes.length; x++){
var oldName;
collTrNodes[x].onmouseover=function(){
oldName = this.className;
this.className="over";
};
collTrNodes[x].onmouseout=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" onclick="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" onclick="checkAll(this);">全选</td>
<td colspan="3">
<input type="button" value="全选" onclick="checkAllByBtn(1);">
<input type="button" value="清空" onclick="checkAllByBtn(0);">
<input type="button" value="反选" onclick="checkAllByBtn(2);">
<input type="button" value="删除" onclick="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" onclick="showContent(this);">是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="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){ //false
document.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="查看测试结果" onclick="showResult();" />
<span id="erroInfo"></span>
<div id="res1" class="close">
1-3分: 您的性格内向，建议.....
</div>
<div id="res2" class="close">
4分以上: 您的性格外向，建议.....
</div>
</body>
</html>