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 尚未实现错误解决办法
Nov 27 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
php常用字符串比较函数实例汇总
2014/11/24 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php可变长参数处理函数详解
2017/02/22 PHP
简单实现php上传文件功能
2017/09/21 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
Python日志模块logging简介
2015/04/13 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
pandas实现选取特定索引的行
2018/04/20 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python list和str互转的实现示例
2020/11/16 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
配件采购员岗位职责
2013/12/03 职场文书
铲车司机岗位职责
2014/03/15 职场文书
开学寄语大全
2014/04/08 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
python Tkinter模块使用方法详解
2022/04/07 Python