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());
      }
    });

---