jquery操作select,radio,checkbox

已有 6312人阅读此文 - - 脚本样式

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。

比如<select class="selector"></select>

1、设置value为pxx的项选中

$(".selector").val("pxx");

2、设置text为pxx的项选中

$(".selector").find("option[text='pxx']").attr("selected",true);

    这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

  

  $(".selector").val();

4、获取当前选中项的text

$(".selector").find("option:selected").text();

    这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

 

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如:

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中,这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

jQuery获取Radio选择的Value:

$("input[name='radio_name']:checked").val();  //选择被选中
Radio的Value值
$("#text_id").focus(function(){//code...});  //事件
 
当对象text_id获取焦点时触发
$("#text_id").blur(function(){//code...});  //事件当对象text_id失去焦点时触发
$("#text_id").select();  //使文本框的Vlaue值成选中状态
$("input[name='radio_name'][value='要中Radio的Value值']").attr("checked",true);

 jQuery获取CheckBox选择的Value

语法解释:
1. $("input[name='checkbox_name']:checked");  //选择被选中CheckBox元素的集合 如果你想得到Value值,你需要遍历
2. $($("input[name='checkbox_name']:checked")).each(function(){arrChk+=this.value + ',';});  //遍历被选中CheckBox元素的集合 得到Value
3. $("#checkbox_id").attr("checked");  //获取一个CheckBox的状态(有没有被选中,返回true/false)
4. $("#checkbox_id").attr("checked",true);  //设置一个CheckBox的状态为选中(checked=true)
5. $("#checkbox_id").attr("checked",false);  //设置一个CheckBox的状态为不选中(checked=false)
6. $("input[name='checkbox_name']").attr("checked",$("#checkbox_id").attr("checked")); 

7. $("#text_id").val().split(",");  //TextValue值以','分隔 返回一个数组


期待你一针见血的评论,Come on!