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

---