當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS編寫多選考試題

JS編寫多選考試題

2012/11/9 19:18:58作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

JS編寫多選考試題

【實例描述】

隨著網(wǎng)絡(luò)的普及，在線考試的應(yīng)用越來越廣泛。本例學(xué)習(xí)如何制作包含多項選擇的考試題。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（yzddtk.cn）</title>
<Script Language="javascript">
function selectV(obj)
{
 try{ 
 var oTd = obj.parentElement; 
//獲取表格的列
 var oTr = oTd.parentElement; 
//獲取表格的行
 var oTable = oTr.parentElement;
//獲取表格
 var oTd_Answer = oTable.rows[oTr.rowIndex-1].cells[0].innerText; 
//獲取問題答案所在的單元格內(nèi)容
 var oBegin = oTd_Answer.indexOf("（") + 1; 
//獲取（所在的位置
 var str = '';
 for(var i=0;i<oTd.children.length;i++){
//遍歷問題選項
 if(oTd.children[i].tagName=='INPUT' && oTd.children[i].checked){
//如果選中
str += oTd.children[i].value; //輸出value值
 }
 }//輸出結(jié)束符號）
 oTable.rows[oTr.rowIndex-1].cells[0].innerText = 
oTd_Answer.substring(0,oBegin) + str + '）';
 }catch(error){
 window.alert(error.description); 
//顯示錯誤信息
 }
}
</Script>
</head>
<body>
<table>
 <tr>
 <td>1.你喜歡的國家（）</td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" value="A" onclick="selectV(this);">A、北京<br>
 <input type="checkbox" value="B" onclick="selectV(this);">B、東京<br>
 <input type="checkbox" value="C" onclick="selectV(this);">C、紐約<br>
 <input type="checkbox" value="D" onclick="selectV(this);">D、韓國
 </td>
</tr>
 <tr>
 <td>2.你喜歡的顏色（）</td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" value="A" onclick="selectV(this);">A、黑色<br>
 <input type="checkbox" value="B" onclick="selectV(this);">B、白色<br>
 <input type="checkbox" value="C" onclick="selectV(this);">C、紅色<br>
 <input type="checkbox" value="D" onclick="selectV(this);">D、藍(lán)色
 </td>
</tr>
</table></body>
</html>

【運行效果】

 多選考試題運行效果

【難點剖析】

本例熟練運用DOM實現(xiàn)單元格的獲取。“parentElement”屬性用來獲取當(dāng)前元素的父元素。獲取單元格內(nèi)容使用的是“cells[0].innerText”屬性。本例還使用了字符串對象的一些操作方法?！癷ndexOf”方法用來獲取指定字符在字符串中的位置，“substring”方法用來截取從指定開始位置到指定結(jié)束位置之間的字符串。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：JS編寫多選考試題 進(jìn)行本實例源碼下載 

標(biāo)簽： JS編寫  考試