Struts2的s:radio標(biāo)簽使用及用jquery添加change事件
更新時間:2013年04月08日 17:16:28 作者:
用到Struts2的s:radio標(biāo)簽時想給它添加一個change事件,由于此標(biāo)簽為頁面自動生成一個radio組,不可以像正常那樣控制,于是想到用jquery來實(shí)現(xiàn)
struts2中s:radio標(biāo)簽的使用總結(jié)
遇到的問題:在使用該標(biāo)簽時,設(shè)置了默認(rèn)選中項(xiàng),但提交數(shù)據(jù)返回后,單選框不能顯示之前選中的項(xiàng),仍然為默認(rèn)選項(xiàng)
通過測試得出以下結(jié)論:
以<s:radio name="user.sex" list="%{#{'1':'男','0':'女'}}" theme="simple"></s:radio>為例
在使用s:radio標(biāo)簽的時候,如果要使該標(biāo)簽?zāi)J(rèn)選中一項(xiàng),可以通過兩種方法
1、通過js代碼實(shí)現(xiàn)
document.getElementsByName('user.sex')[0].checked=true;//默認(rèn)選中男
2、通過添加value屬性
<s:radio name="user.sex" list="%{#{'1':'男','0':'女'}}" value="1" theme="simple"></s:radio>
在通過value屬性設(shè)置單選框的默認(rèn)選項(xiàng)時,無論何時頁面刷新后單選框的狀態(tài)都是選中該默認(rèn)項(xiàng)
因此,如果要讓數(shù)據(jù)提交后臺后,該單選框仍然是之前選中的項(xiàng),不能通過value屬性設(shè)置它的默認(rèn)項(xiàng),應(yīng)該通過第一種方法設(shè)置
此外,后臺能夠正確獲取該單選框的值,而與value的設(shè)置無關(guān)
用jquery給Struts2的<s:radio />標(biāo)簽添加change事件
用到Struts2的<s:radio/>標(biāo)簽時想給它添加一個change事件,由于此標(biāo)簽為頁面自動生成一個radio組,不能像平常那樣控制。網(wǎng)上說了一大堆,也沒找到一個滿意的。如果像以前那樣給此<s:radio />設(shè)定一個id,那樣生成的radio組中會自動添加一個數(shù)字,如:
<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來實(shí)現(xiàn),很簡單,給此<s:radio/>添加一個屬性cssClass="filetype",就會給每個radio添加一個css類,上面可以看得出來,那么接下來代碼如下所示:
$(function(){
$(".filetype").change(function(){
var val = $("input[name='file']:checked").val();//獲得選中的radio的值
if(val=='1'){
alert(“是”);
}else{
alert(“否”);
}
});
});
遇到的問題:在使用該標(biāo)簽時,設(shè)置了默認(rèn)選中項(xiàng),但提交數(shù)據(jù)返回后,單選框不能顯示之前選中的項(xiàng),仍然為默認(rèn)選項(xiàng)
通過測試得出以下結(jié)論:
以<s:radio name="user.sex" list="%{#{'1':'男','0':'女'}}" theme="simple"></s:radio>為例
在使用s:radio標(biāo)簽的時候,如果要使該標(biāo)簽?zāi)J(rèn)選中一項(xiàng),可以通過兩種方法
1、通過js代碼實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
document.getElementsByName('user.sex')[0].checked=true;//默認(rèn)選中男
2、通過添加value屬性
復(fù)制代碼 代碼如下:
<s:radio name="user.sex" list="%{#{'1':'男','0':'女'}}" value="1" theme="simple"></s:radio>
在通過value屬性設(shè)置單選框的默認(rèn)選項(xiàng)時,無論何時頁面刷新后單選框的狀態(tài)都是選中該默認(rèn)項(xiàng)
因此,如果要讓數(shù)據(jù)提交后臺后,該單選框仍然是之前選中的項(xiàng),不能通過value屬性設(shè)置它的默認(rèn)項(xiàng),應(yīng)該通過第一種方法設(shè)置
此外,后臺能夠正確獲取該單選框的值,而與value的設(shè)置無關(guān)
用jquery給Struts2的<s:radio />標(biāo)簽添加change事件
用到Struts2的<s:radio/>標(biāo)簽時想給它添加一個change事件,由于此標(biāo)簽為頁面自動生成一個radio組,不能像平常那樣控制。網(wǎng)上說了一大堆,也沒找到一個滿意的。如果像以前那樣給此<s:radio />設(shè)定一個id,那樣生成的radio組中會自動添加一個數(shù)字,如:
復(fù)制代碼 代碼如下:
<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來實(shí)現(xiàn),很簡單,給此<s:radio/>添加一個屬性cssClass="filetype",就會給每個radio添加一個css類,上面可以看得出來,那么接下來代碼如下所示:
復(fù)制代碼 代碼如下:
$(function(){
$(".filetype").change(function(){
var val = $("input[name='file']:checked").val();//獲得選中的radio的值
if(val=='1'){
alert(“是”);
}else{
alert(“否”);
}
});
});
您可能感興趣的文章:
- 使用jquery模擬a標(biāo)簽的click事件無法實(shí)現(xiàn)跳轉(zhuǎn)的解決
- jquery 給動態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
- jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
- 詳談jQuery unbind 刪除綁定事件 / 移除標(biāo)簽方法
- jquery 為a標(biāo)簽綁定click事件示例代碼
- jquery trigger偽造a標(biāo)簽的click事件取代window.open方法
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- jquery觸發(fā)a標(biāo)簽跳轉(zhuǎn)事件示例代碼
- jQuery實(shí)現(xiàn)動態(tài)添加標(biāo)簽事件
- JQuery?綁定select標(biāo)簽的onchange事件,彈出選擇的值,并實(shí)現(xiàn)跳轉(zhuǎn)、傳參
相關(guān)文章
詳談 Jquery Ajax異步處理Json數(shù)據(jù).
啥叫異步,啥叫Ajax.咱不談啥XMLHTTPRequest.通俗講異步就是前臺頁面javascript能調(diào)用后臺方法.這樣就達(dá)到了無刷新.2011-09-09
jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實(shí)例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能
這篇文章主要介紹了基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下2016-04-04
Jquery on方法綁定事件后執(zhí)行多次的解決方法
下面小編就為大家?guī)硪黄狫query on方法綁定事件后執(zhí)行多次的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Jquery Ajax學(xué)習(xí)實(shí)例7 Ajax所有過程事件分析示例
JQuery在執(zhí)行Ajax的過程中會觸發(fā)很多事件。2010-03-03
jQuery操作Select的Option上下移動及移除添加等等
jQuery操作Select Option:向上移動選中的option、向下移動選中的option、移除選中的option、獲取所有的option值、添加option等等,下面有個不錯的示例,感興趣的朋友不要錯過2013-11-11

