关于radio 单选框在项目中的一些心得
2017-07-27 09:15
302 查看
如图,是一个审核题目的功能,在点击审核题目后页面改变(没有跳转到新页面),并且出现了题目类型的单选框radio 此时需要做的功能就是当用户点击选择题时,下方的信息版面会多出一个题目选项这一栏。
采用div 属性display ,当display属性为none时,该div被隐藏
思路是,默认div为隐藏,当点击radio按钮时进行控制将属性改为空,使其显示,点击其他按钮时,div重新隐藏。
遇到问题及解决方法:
1.采用自启动函数进行控制,并使用jQuery进行函数绑定,js代码如下
(
function()
{
var radios = document.getElementsByName("questions_type");
//根据 name集合长度 遍历name集合
for(var i=0;i<radios.length;i++)
{
//判断那个单选按钮为选中状态
if(radios[i].checked)
{
//弹出选中单选按钮的值
alert(radios[i].value);
}
}
}()
);
上方法只是测试代码,因此只弹出选中按钮做测试,测试过后发现该方法并不能实现需要,查其原因:在刷新页面时自启动函数启动但是由于页面触发需要点击审核按钮,导致点击审核按钮之后该方法已经失效,所以无法进行改变,只好放弃该方法。
2.给radio按钮添加onclick按钮直接触发,代码如下:
<input type="radio" name="questions_type" value="s" onclick="a()"/>选择题
<input type="radio" name="questions_type" value="c" onclick="a()"/>填空题
<input type="radio" name="questions_type" value="q" onclick="a()"/>编程题
function a()
{
var radios = document.getElementsByName("questions_type");
//根据 name集合长度 遍历name集合
for(var i=0;i<radios.length;i++)
{
//判断那个单选按钮为选中状态
if(radios[i].checked&&radios[i].value=="s")
{
document.getElementById("question_s").style.display="";
break;
}else
{
document.getElementByI
828b
d("question_s").style.display="none";
}
}
}
该方法经测试已经可用,需要注意的是在for循环时必须加上break;否则可能会导致选择第一个时已经将题目选项栏调出来,之后进行循环时又将其属性改为隐藏导致属性被覆盖掉出现误差,其次,为何要在填空题和编程题的选项中也触发方法,是因为如果只在选择题选项中触发的话,用户点击选择题之后再点击填空题或编程题时,题目选项该栏仍然存在。
以上是我个人在项目过程中的一些小心得,希望记录下来,在以后的学习中进行积累。
相关文章推荐
- 关于近期带项目的一些心得
- 关于项目的一些心得
- 关于2048小游戏项目的一些心得
- (转)看了一些ASP.NET MVC开源项目后的一些想法,关于ASP.NET MVC+Repository+Service架构的一些思考
- 关于沉浸式状态栏的一些心得
- 关于sql的一些学习心得
- Android端关于第三方环信的一些心得
- 关于学习MSDN中"创建自定义字段类型和字段控件"的一些心得跟问题。
- 关于淘宝 TOP 开发 使用的一些心得,问题不断更新中。。。
- 关于JBoss的一些项目配置
- 项目总结之关于JQuery一些常用的函数
- 关于学习linux的一些心得体会
- 关于一些Java开发工具的使用心得(不断更新)
- 关于项目实施的一些想法
- Ruby On Rails开发中关于jQuery-datetimepicker-rails的一些使用心得
- 关于项目中下单流程HTML设计的一些思考
- 关于UITableView的Cell复用(重用)谈谈我的一些心得【转载】
- 关于**活动项目上线之后的一些总结
- 关于Recycleview使用的一些心得