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中的new使用
Mar 20 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JS中this的4种绑定规则详解
Feb 04 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Python过滤列表用法实例分析
2016/04/29 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python实现数据分析与建模
2019/07/11 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
python实现磁盘日志清理的示例
2020/11/05 Python
四查四看剖析材料
2014/02/14 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
给校长的建议书100字
2014/05/16 职场文书
会计学习心得体会
2014/09/09 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书