jqurey操做radio總結

時間 2019-11-16

標籤 jqurey radio 總結简体版

原文原文鏈接

在咱們前端的項目中，會常常用到radio單選按鈕，下面給出個例子總結jquery對radio的各類操做：
javascript

示例以下：html

<html>
<head>
    <meta charset="UTF-8">
    <title>radio </title>
    <script type="text/javascript" src="jquery-1.10.2.js"></script>  
</head>
<body>
    <form>
        <input type="radio" name="city" checked="checked" value="BeiJing">北京
        <input type="radio" name="city" value="TianJin">天津
        <input type="radio" name="city" value="NanJing">南京
        <input type="radio" name="city" value="YangZhou">揚州
        <input type="radio" name="city" value="SuZhou">蘇州
    </form>
</body>
<html>

一、獲取選中的radio的值：
前端

$("input:radio[name='city']:checked").val();
或者
("input[type=radio][name='city']:checked").val();

　　使用元素選擇器，再使用屬性過濾器name='city'，最後使用:checked選取被選中的元素。java

二、給指定值的radio設置選中狀態：
jquery

$("input:radio[name='city'][value='YangZhou']").attr("checked",true);
或者
$("input[type=radio][name='city'][value='YangZhou']").attr("checked",true);

　注：不少時候咱們更加value的值來選中對應的radio按鈕，上面都是直接寫死在代碼裏面，可是不少的時候，咱們value是後臺傳過來的值，會存在一個變量裏面，這個變量每次存的值不會同樣。ajax

例如：這個變量就叫作: Cityvalue服務器

cityvalue是js用ajax從服務器請求過來的，好比cityvalue="TianJin";this

若是咱們直接把cityvalue寫到裏面是有錯誤的：spa

例如;code

$("input[type=radio][name='city'][value=cityvalue]").attr("checked",true);

這樣是錯誤的，咱們能夠在console上打印出這串字符串，看一下他的值是以下：

由於cityvalue在""裏面，因此這個就是他原本的名字值，而他所表明的字符串並無進去，因此咱們不要把他放在雙引號裏面，由於cityvalue原本也是一個字符串，因此採用鏈接的方式+，變爲

$("input[type=radio][name='city'][value="+cityvalue+"]").attr("checked",true);

這樣是對的，可是我以爲要和上面同樣得把：var cityvalue="'TianJin'"，就是在裏面加上單引號，這樣拼成的字符串就和前面的如出一轍了：

給name="city"並且value="YangZhou"的radio設置選中狀態。

三、取消name="city"的radio的選中狀態：

$('input[name="city"]:checked').attr("checked",false);

四、獲取name="city"的radio的個數：

$("input[name='city']").length;

五、獲取name="city"並且索引是偶數的radio:

$("input[name='city']:even");

　　索引是從0開始的。

六、獲取name="city"並且索引是奇數的radio:

$("input[name='city']:odd");

　　索引是從0開始的。

七、迭代radio:

$("input[name='city']").each(function(i,obj){
    //i,迭代的下標，從0開始
    //obj,當前的對象(HTMLInputElement),可使用obj.value格式獲取屬性值
    //$(this);當前jQuery對象,可使用$(this).val()獲取屬性值
});

　　迭代name="city"的radio。

八、禁用radio:

$("input[name='city']").attr("disabled",true);

　　禁用name="city"的radio。

九、啓用radio:

$("input[name='city']").attr("disabled",false);

　　啓用name="city"的radio。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。