用JS控制页面表单(From)中单选(Radio)控件值(value)的方法
2016-08-16 10:39
453 查看
今天将两个JavaScript的小技巧,原因很简单,因为CG最近在改一个网站的表单和前几天的索迪项目的时候,发现在HTML表单中的单选框的值的控制,和选中控制上让人很郁闷,特别是使用JSP的时候,所以今天讲两个JavaScript的小技巧来解决这个问题
问题一:表格中每一行中的单选框在能不能在点击这一行之后自动被选中并且Radio的value属性更改。
解决方法:当点击触发表格行的时候遍历所有的radio并对比radio的value和选中的value之间的差别,然后再控制是否选中本行的这个radio。
以下是JS代码
以下是演示效果
http://www.lidaren.com/code/JsRadio.htm
问题二:动态页面自动生成了radio和相应的value,但是无法生成radio的选中状
态
解决方法:加载页面后遍历所有的radio,对比一下是否有符合的value,符合的话
就直接设置选中
以下是JS代码
李大仁博客原创,欢迎转载,转载请注明出处。
--------------------------------------------------------------------------------------
- 版权声明:
- 如在本页面内无特别说明,本文内容均为[李大仁博客]原创,本文版权归[李大仁博客]所有。
- 欢迎转载,转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。
- 文章标题:[javaScript]用JS控制页面表单(From)中单选(Radio)控件值(value)的方法
- 独立博客:李大仁博客
- 永久链接:http://www.lidaren.com/archives/388
--------------------------------------------------------------------------------------
以上内容由博客自动发布工具自动发布,最终显示内容和效果会与原文内容有所偏差,敬请谅解。
问题一:表格中每一行中的单选框在能不能在点击这一行之后自动被选中并且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[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 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 if(radios[i].value == val) { radios[i].checked = true; break; } } }
李大仁博客原创,欢迎转载,转载请注明出处。
--------------------------------------------------------------------------------------
- 版权声明:
- 如在本页面内无特别说明,本文内容均为[李大仁博客]原创,本文版权归[李大仁博客]所有。
- 欢迎转载,转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。
- 文章标题:[javaScript]用JS控制页面表单(From)中单选(Radio)控件值(value)的方法
- 独立博客:李大仁博客
- 永久链接:http://www.lidaren.com/archives/388
--------------------------------------------------------------------------------------
以上内容由博客自动发布工具自动发布,最终显示内容和效果会与原文内容有所偏差,敬请谅解。
相关文章推荐
- js控制页面控件隐藏显示的两种方法介绍
- web页面中表单控件(如checkbox,select,radio等)的赋值回写的方法介绍
- Acrobat PDF的ActiveObject控件js方法SetView控制页面展示类型
- js控制页面控件隐藏显示的两种方法介绍
- JS控制页面控件隐藏显示的两种方法
- JS控制页面控件隐藏显示的两种方法
- javascript控制页面控件隐藏显示的两种方法
- javascript控制页面控件隐藏显示的方法
- javascript控制页面控件隐藏显示的两种方法
- javascript控制页面控件隐藏显示的两种方法
- JS动态控制form表单提交到多个页面
- javascript控制页面控件隐藏显示的两种方法
- 判断页面服务器控件的Js方法
- 防止自建控件与页面间重复引入客户端js脚本的方法
- 防止自建控件与页面间重复引入客户端js脚本的方法(转)
- 从外部的js文件中获取ASPX页面的控件ClientID(get control reference from external javascript)
- webBrowser,控制页面、提交表单的两种方法
- javascript控制页面控件隐藏显示的两种方法
- 用JS验证ASP.NET2.0控件表单的方法(visual2005)
- 用JS验证ASP.NET2.0控件表单的方法(visual2005)