当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS编写多选考试题

JS编写多选考试题

2012/11/9 19:18:58作者:佚名来源:网络

移动端

【实例名称】

JS编写多选考试题

【实例描述】

随着网络的普及,在线考试的应用越来越广泛。本例学习如何制作包含多项选择的考试题。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</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; //获取问题答案所在的单元格内容  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值  }  }//输出结束符号)  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、蓝色  </td> </tr> </table></body> </html>

【运行效果】

 多选考试题运行效果

【难点剖析】

本例熟练运用DOM实现单元格的获取。“parentElement”属性用来获取当前元素的父元素。获取单元格内容使用的是“cells[0].innerText”属性。本例还使用了字符串对象的一些操作方法。“indexOf”方法用来获取指定字符在字符串中的位置,“substring”方法用来截取从指定开始位置到指定结束位置之间的字符串。

【源码下载】

为了JS代码的准确性,请点击:JS编写多选考试题 进行本实例源码下载 

标签: 考试