所需樣式（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" target="_blank" rel="external nofollow" />
<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].ο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){ //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="檢視測試結果" οnclick="showResult();" />
<span id="erroInfo"></span>
<div id="res1" class="close">
1-3分: 您的性格内向，建議.....
</div>
<div id="res2" class="close">
4分以上: 您的性格外向，建議.....
</div>
</body>
</html>
![軟體測試——Web測試基礎理論知識思維導圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)