首頁 > web前端 > js教程 > JQuery控制Radio選取方法分析_jquery

JQuery控制Radio選取方法分析_jquery

WBOY
發布: 2016-05-16 15:57:17
原創
1256 人瀏覽過

本文實例講述了JQuery控制Radio選中方法。分享給大家供大家參考。具體如下:

方法1:

$(function () { 
  $("#spanNan").click(function () { 
  $("#Radio1").attr("checked", true); 
  $("#Radio2").attr("checked", false); 
  });
  $("#spanNv").click(function () {
  $("#Radio2").attr("checked", true);
  $("#Radio1").attr("checked", false);
  });
})

登入後複製

方法2:(簡單方法)

$(function () {
  $("#spanNan").click(function () {
  //$("#Radio1").attr("checked", true);
  //$("#Radio2").attr("checked", false);
  $("#Radio1").click();
  });
  $("#spanNv").click(function () {
  //$("#Radio2").attr("checked", true);
  //$("#Radio1").attr("checked", false);
  $("#Radio2").click();
  });
})

登入後複製
<input id="Radio2" type="radio" name="sex"/>
<label for="Radio2">女</label>

登入後複製

總結:

HTML的Radio控制項若要實現單選,例如本例中男女的選擇,需要為Radio新增name屬性,且值相同;例:name=「sex」。

預設選radio:

jQuery(document).ready(function(){
  $("input[name=targetBlank]:eq(0)").attr("checked",'checked');
  $("input[name=status]:eq(0)").attr("checked",'checked');
});
登入後複製

使用jquery取得radio的值,最重要的是掌握jquery選擇器的使用,在一個表單中我們通常是要取得被選取的那個radio項目的值,所以要加checked來篩選,例如有以下的一些radio項:

1.jquery取得radio的值
2.jquery取得checkbox的值
3.jquery取得select的值

要想取得某個radio的值有以下的幾種方法,直接給出程式碼:

$('input[name="testradio"]:checked').val();

$('input:radio:checked').val();

$('input[@name="testradio"][checked]');

$('input[name="testradio"]').filter(':checked');

登入後複製

差不多挺全的了,如果我們要遍歷name為testradio的所有radio呢,程式碼如下

$('input[name="testradio"]').each(function(){alert(this.value);});

如果要取具體某個radio的值,例如第二個radio的值,這樣寫

<script type="text/javascript">
$(document).ready(function(){
  $("input[@type=radio][name=sex][@value=1]").attr("checked",true);
}); 
</script>
登入後複製

您的性別:

<input type="radio" name="sex" value="1" <s:if test="user.sex==1">checked</s:if>/>男 
<input type="radio" name="sex" value="0" <s:if test="user.sex==0">checked</s:if>/>女 

登入後複製

希望本文所述對大家的jQuery程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板