javascript 模拟开源中国IT技能页面 纸上得来终觉浅，前面总结了很多javascript 的一些要点。但是不是真的领悟了，就比较耐人寻味了，于是模拟了一下开源中国IT技能页面，纯的js加ht
javascript 模拟开源中国IT技能页面
纸上得来终觉浅，前面总结了很多javascript 的一些要点。但是不是真的领悟了，就比较耐人寻味了，于是模拟了一下开源中国IT技能页面，纯的js加html代码，实现了该有的效果，感觉自己收获很大。
js代码：不过radio部分实现的不是很优雅，可以参照我的div标签cxs去优化实现。
html页面：没有全部使用div进行布局设置是一个比较大的败笔，不过这次主要是侧重js，优化方向也是js结合div的布局使用。
window.onload = setEvents;var radiostate = 1;function setEvents(event) { document.getElementById("radio1").addEventListener("click", dealRadio1, true); document.getElementById("radio2").addEventListener("click", dealRadio2, true); document.getElementById("radio3").addEventListener("click", dealRadio3, true); document.getElementById("cxs").addEventListener("click", dealCheck, true);}function dealCheck(event) { var nums = 0; for (i = 0; i < document.getElementsByName("cx").length; i++) { if (document.getElementsByName("cx")[i].checked == true) { nums++; } } if (nums == 5) { for (i = 0; i < document.getElementsByName("cx").length; i++) { if (document.getElementsByName("cx")[i].checked == false) { document.getElementsByName("cx")[i].setAttribute('disabled','disabled'); } } }else{ for (i = 0; i < document.getElementsByName("cx").length; i++) { if (document.getElementsByName("cx")[i].checked == false) { document.getElementsByName("cx")[i].removeAttribute('disabled'); } } }}function stopEvent(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }}function dealRadio1(event) { if (radiostate != 1) { document.getElementById('radio1').checked = true; document.getElementById('radio2').checked = false; document.getElementById('radio3').checked = false; radiostate = 1; }}function dealRadio2(event) { if (radiostate != 2) { document.getElementById('radio2').checked = true; document.getElementById('radio1').checked = false; document.getElementById('radio3').checked = false; radiostate = 2; }}function dealRadio3(event) { if (radiostate != 3) { document.getElementById('radio3').checked = true; document.getElementById('radio1').checked = false; document.getElementById('radio2').checked = false; radiostate = 3; }}<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/skillForm.js"></script> </head> <body> <form id="skill"> <p>我是一名： <select name="selection"> <option value="op1" >程序员</option> <option value="op2" >项目经理</option> <option value="op3" >技术总监</option> </select> 工作年限： <select name="selection"> <option value="op1" >学生</option> <option value="op2" >应届毕业生</option> <option value="op3" >一年</option> </select> <br /> </p> <p>目前状态: <input id="radio1" type="radio" value="opt1" checked="true" /> 在职 <input id="radio2" type="radio" value="opt1" /> 学生 <input id="radio3" type="radio" value="opt1" /> 找工作 <br /> </p> <p>工作单位： <input type="text" /><br/> </p> <p>熟悉的开发平台：（最多选5个）<br/> <div id="cxs"> <input name="cx" type="checkbox" value="opt3" /> Java EE <input name="cx" type="checkbox" value="opt4" /> Java SE <input name="cx" type="checkbox" value="opt3" /> J2ME/K-Java <input name="cx" type="checkbox" value="opt4" /> HTML/CSS <br/> <input name="cx" type="checkbox" value="opt3" /> Android <input name="cx" type="checkbox" value="opt4" /> iOS/Objective-C <input name="cx" type="checkbox" value="opt3" /> Windows Phone <input name="cx" type="checkbox" value="opt4" /> Linux/Unix <br/> </div> </p> </form> </body></html>