radio/checkbox/select使用JQurey的常見操作

1.radio

<input type="radio"  name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女

（1）根據(是否選中)狀態取值

（1.1）被選中radio的值

    $(":radio[name=sex]:checked").val();    // 寫法一
    $("input[name=sex]:checked").val();    // 寫法二

    $("input:radio[name=sex]:checked").val();  // 寫法三
    $("input[type=radio][name=sex]:checked").val();  // 寫法四

（1.2）未選中radio的值(如果一組中都未被選中，默認取第一個未被選中的)

$(":radio[name=sex]:not(:checked)").val();

（2）根據值設置狀態(選中或取消)

（2.1）選中指定radio

    $("input[name=sex][value='女']").prop("checked", true);   // 對於選中或非選中邏輯狀態的值用prop方法代替原來的attr

（2.2）取消指定radio

    $("input[name=sex][value=女]").prop("checked", false);

jquery選擇器的其他用法：

    $("input[name=list]:first").prop("checked", true);  //  選中多元組中第一個   

    $("input[name=list]:last").prop("checked", true); // 選中組多元中最後一個       

（3）判斷是否選中

（3.1）遍歷組元素，逐一判斷

    $("input[name=sex]").each(function(){
        if($(this).prop("checked")){ //$(this).is(":checked") 
            alert($(this).val() +‘被選中’);
        }else{
             alert($(this).val() +‘未選中’);
        }
   })

【注意】設置屬性時，對選中這種邏輯狀態的屬性(在界面上可能看不到的屬性)建議使用prop()方法，其他看得見的屬性用attr()方法。

---

2. checkbox

<input type="checkbox"  name="list" value="十分滿意" />十分滿意
<input type="checkbox" name="list" value="滿意" />滿意
<input type="checkbox" name="list" value="不滿意" />不滿意
<input type="checkbox" name="list" value="非常差" />非常差

（0）獲取單個選中的checkbox選中項

    $(":checkbox[name=sex]:checked").val();
    $("input[name=sex]:checked").val();
    $("input:checkbox[name=sex]:checked").val();
    $("input[type=checkbox][name=sex]:checked").val();

（1）根據值設置狀態(選中或取消)

（1.1）選中指定checkbox

      // 對於選中或非選中邏輯狀態的值用prop方法代替原來的attr
    $("input[name=list][value=十分滿意]").prop("checked", true); 

（1.2）取消指定checkbox

    $("input[name=list][value=十分滿意]").prop("checked", false);

jquery選擇器的其他用法：

    //  選中多元組中第一個
    $("input[name=list]:first").prop("checked", true);   
    // 選中組多元中最後一個                    
    $("input[name=list]:last").prop("checked", true); 
    // eq(index)
    $("input[name=list]:eq(0)").prop("checked", true);  
    $("input[name=list]").eq(0).prop("checked", true); 

    // 利用slice()進行多選操作          $(":checkbox[name=list]").slice(0,2).prop("checked", true);

（2）全選

    $(":checkbox[name=list]").prop("checked", true);

（3）取消全選

    $(":checkbox[name=list]").prop("checked", false);

（4）反選

    $(":checkbox[name=list]").each(function(){
        if($(this).prop("checked")){
             $(this).prop("checked", false);
        }else{
             $(this).prop("checked", true);
        }
   });

（5）所選值

   var selVal = '';
   $(":checkbox[name=list]").each(function(){
        if($(this).prop("checked")){
        selVal += $(this).val() + ',';
        }
   });

   if(selVal != ''){
        selVal = selVal.substring(0, selVal.length - 1);
   }
   alert('selVal = ' + selVal);

---

3. select

<select id="s1" name="province">
 <option value="">--省份--</option>
 <option value="guangdong">廣東</option>
 <option value="fujian">福建</option>
 <option value="zhejiang">浙江</option>
 <option value="hunan">湖南</option>
 <option value="hubei">湖北</option>
</select>

（1）獲取被選中項的值，文本，索引

    var selVal = $("#s1").val();      
    //var selVal2 = $("#s1").find("option:selected").val();
    var selTxt = $("#s1").find("option:selected").text();
    // var selTxt=$("select[name=province]option:selected").text();
    var selIndex = $("#s1").get(0).selectedIndex;
    $("#s1 option:last").prop("index");  // 最大索引值

（2）判斷某項是否選中

    // prop()判斷                                                                      
    $("#s1").find("option[value=hubei]").prop("selected"); 

    // is(":selected")判斷
    $("#s1").find("option:last").is(":selected");  

（3）指定一項選中

    $("#s1").val('hubei');
    // $("#s1").find("option[value=hubei]").prop("selected", true);
    // $("#s1").get(0).selectedIndex = 5;
    $("#s1").find("option:eq(1)").prop("selected", true);  // 讓第2項選中
    $("#s1").find("option:last").prop("selected", true);  // 讓最後一項選中

（4）清空選項；獲取選項的長度

    $("#s1").val('');
    $("#s1 option").length;

（5）添加/移除/清空一項

    // prepend()在最前面添加;append()在後面添加
    $("#s1").append('<option value="beijing">北京</option>');  
    $("#s1").find("option[value=beijing]").remove();
    $("#s1").empty();//清空下拉框

（6）遍歷option項

    $("select[name=province] option").each(function(){
      if($(this).val() == 'beijing'){
        alert($(this).val() + ' \n ' + $(this).text());
      }
    });

---