Struts2的s:radio标签使用及用jquery添加change事件


Posted in Javascript onApril 08, 2013

struts2中s:radio标签的使用总结

遇到的问题:在使用该标签时,设置了默认选中项,但提交数据返回后,单选框不能显示之前选中的项,仍然为默认选项
通过测试得出以下结论:

以<s:radio name="user.sex" list="%{#{'1':'男','0':'女'}}" theme="simple"></s:radio>为例
在使用s:radio标签的时候,如果要使该标签默认选中一项,可以通过两种方法
1、通过js代码实现

document.getElementsByName('user.sex')[0].checked=true;//默认选中男

2、通过添加value属性
<s:radio name="user.sex" list="%{#{'1':'男','0':'女'}}" value="1" theme="simple"></s:radio>

在通过value属性设置单选框的默认选项时,无论何时页面刷新后单选框的状态都是选中该默认项
因此,如果要让数据提交后台后,该单选框仍然是之前选中的项,不能通过value属性设置它的默认项,应该通过第一种方法设置
此外,后台能够正确获取该单选框的值,而与value的设置无关

用jquery给Struts2的<s:radio />标签添加change事件

用到Struts2的<s:radio/>标签时想给它添加一个change事件,由于此标签为页面自动生成一个radio组,不能像平常那样控制。网上说了一大堆,也没找到一个满意的。如果像以前那样给此<s:radio />设定一个id,那样生成的radio组中会自动添加一个数字,如:

<input type="radio" name="file" id="upfile_file0" value="0"><label for="upfile_file0">否</label> 
<input type="radio" name="file" id="upfile_file1" checked="checked" value="1" class="filetype"><label for="upfile_file1">是</label>

这时可以借助jquery来实现,很简单,给此<s:radio/>添加一个属性cssClass="filetype",就会给每个radio添加一个css类,上面可以看得出来,那么接下来代码如下所示:
$(function(){ 
$(".filetype").change(function(){ 
var val = $("input[name='file']:checked").val();//获得选中的radio的值 
if(val=='1'){ 
alert(“是”); 
}else{ 
alert(“否”); 
} 
}); 
});
Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
React组件refs的使用详解
Feb 09 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
Jquery图片滚动与幻灯片的实例代码
Apr 08 #Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 #Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 #Javascript
JS继承--原型链继承和类式继承
Apr 08 #Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 #Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 #Javascript
You might like
PHP支付宝当面付2.0代码
2018/12/21 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
详解Node 定时器
2018/02/26 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python 对key为时间的dict排序方法
2018/10/17 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python可以用来做什么
2020/11/23 Python
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
幼儿园大班毕业感言
2014/02/06 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
基层党支部整改方案
2014/10/25 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
windows安装python超详细图文教程
2021/05/21 Python
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏