用JS控制页面表单(From)中单选(Radio)控件值(value)的方法
今天将两个JavaScript的小技巧，原因很简单，因为CG最近在改一个网站的表单和前几天的索迪项目的时候，发现在HTML表单中的单选框的值的控制，和选中控制上让人很郁闷，特别是使用JSP的时候，所以今天讲两个JavaScript的小技巧来解决这个问题
问题一：表格中每一行中的单选框在能不能在点击这一行之后自动被选中并且Radio的value属性更改。
解决方法：当点击触发表格行的时候遍历所有的radio并对比radio的value和选中的value之间的差别，然后再控制是否选中本行的这个radio。
以下是JS代码
//更新IdValue的值 // function updateIdValue(obj,radioName){ var cellText; cellText = obj.cells[1].innerHTML.toString(); if(!radioName) return; if(getRadioValue(radioName) != cellText){ setCheckedValue(radioName,cellText); } IdValue=cellText;//更新 } //设置radio的选中状态 function setCheckedValue(radioName, newValue) { var radios = document.getElementsByName(radioName); for(var i=0; i<radios .length; i++) { radios[i].checked = false; if(radios[i].value == newValue.toString()) { radios[i].checked = true; } } } //得到radio的值 function getRadioValue(radioName){ var obj=document.getElementsByName(radioName); for(var i=0;i<obj.length;i++){ if(obj[i].checked){ return obj[i].value; } } } |
以下是演示效果
http://www.lidaren.com/code/JsRadio.htm
问题二：动态页面自动生成了radio和相应的value，但是无法生成radio的选中状
态
解决方法：加载页面后遍历所有的radio，对比一下是否有符合的value，符合的话
就直接设置选中
以下是JS代码
//修改编辑页面中的checkBox的选定状态 function setRadioChecked(val,radioName){ var radios = document.getElementsByName(radioName); for(var i=0; i<radios .length; i++) { if(radios[i].value == val) { radios[i].checked = true; break; } } } |
李大仁博客原创，欢迎转载，转载请注明出处。
Recent Comments