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 继承详解(四)
Jul 13 Javascript
Javascript this指针
Jul 30 Javascript
网页自动跳转代码收集
Sep 27 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
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
IIS6的PHP最佳配置方法
2007/03/19 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
python复制文件的方法实例详解
2015/05/22 Python
python逆序打印各位数字的方法
2018/06/25 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
详解Django配置优化方法
2019/11/18 Python
python不同系统中打开方法
2020/06/23 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
亿企通软件测试面试题
2012/04/10 面试题
党员承诺书怎么写
2014/05/20 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
活动经费申请报告
2015/05/15 职场文书
javaScript Array api梳理
2021/03/31 Javascript
dubbo服务整合zipkin详解
2021/07/26 Java/Android