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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
原生js实现公告滚动效果
Jan 10 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
FleaPHP的安全设置方法
2008/09/15 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
javascript常用对话框小集
2013/09/13 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
基于Python的OCR实现示例
2020/04/03 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python中内建模块collections如何使用
2020/05/27 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
什么是抽象
2015/12/13 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
全神贯注教学反思
2014/02/03 职场文书
工作表现自我评价
2014/02/08 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
中队活动总结
2014/08/27 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python