码迷,mamicode.com
首页 > Web开发 > 详细

jquery 对下拉框和单选框的一些操作

时间:2014-12-29 22:48:45      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

下拉框

 <select id="CategoryId" data-placeholder="资产类型" style="width:350px;" >
 <option value="1">硬盘</option>
 <option value="2">主板</option>
 <option value="3">CPU</option>
 <option value="4">网卡</option>

 

1、设置下拉框“硬盘”为选中

    $("#CategoryId").val("1");
    $("#CategoryId").find("option[text=‘硬盘‘]").attr("selected",true);  
  $("#CategoryId").get(0).attr("selected",true);

2、获取下拉框的值

 $("#CategoryId").val();  #1
 $("#CategoryId").find("option:selected").text();  #"硬盘"

3、select的级联

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。

如:$(".selector1").change(function(){

     // 先清空第二个

      $(".selector2").empty();

     // 实际的应用中,这里的option一般都是用循环生成多个了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});

    $("#DestIdcpName").change(function()
     {
        $("#id").empty();
        $.ajax({
            url: url,
            type: "POST",
            data:{"params":params},
            dataType: "json",
            success: function (list) {
                if (list.Return === 0) {
                    list = list.Data;
                      $("#"+id).append("<option value=‘‘></option>");
                    for (var i = 0; i < list.length; i++) {
                             var o = "<option value=‘" + list[i][column] + "‘>" + list[i][column] + "</option>";  
                            $("#id").append(o);
                    }
                    return true;
                }
            },
            error: function (list) {
                alert(list.message);
                return false;
            }
        });
        return true;
   });

 

复选框

<label><input  type="checkbox" id="checkAll" />全选/全不选</label>
<label><input name="Fruit" type="checkbox" value="1" />苹果</label>
<label><input name="Fruit" type="checkbox" value="1" />苹果</label> 
<label><input name="Fruit" type="checkbox" value="2" />桃子 </label> 
<label><input name="Fruit" type="checkbox" value="3" />香蕉 </label> 
<label><input name="Fruit" type="checkbox" value="4" /></label>

1、复选框全选/反选

prop或者attr 都可以

 $("[name=‘checkbox‘]").attr("checked",‘true‘);

 $("[name=‘Fruit‘]").prop("checked",‘true‘);

/*checkbox 实现全选和反选*/
      $(‘#checkAll‘).live(‘click‘,function(){
            if($(this).prop(‘checked‘)){
            $("[name=‘Fruit‘]").each(function(){
                      $(this).prop(‘checked‘, true);
                    });
            }else{
         $("[name=‘Fruit‘]").each(function(){ 
          $(this).prop(‘checked‘, false);
       }); } });

2、禁用checkbox

$("input[type=‘checkbox‘]").prop({ disabled: true });
#or
$("[name=‘Fruit‘]").prop({ disabled: true });

 

3、设置选中

     $("input[name=‘Fruit‘][value=3]").prop("checked", ‘checked‘);
     $("input[name=‘Fruit‘][value=3]").prop("checked", ‘‘);
     $("input[name=‘Fruit‘]").get(2).checked = true; 

4、获取选中值

      $("[name=‘Fruit‘]").each(function(){ 
     if($(this).prop(‘checked‘))
         {
              alert($(this).val());
         }
  });

单选框

<label><input name="IsAvailable" type="radio" value="2" />待测试 </label> 
<label><input name="IsAvailable" type="radio" value="1" /></label>  
<label><input name="IsAvailable" type="radio" value="0" /></label> 

1、设置选中

  $("input[name=‘IsAvailable‘]").get(0).checked= true;  //选中“待测试”
   $("input[name=‘IsAvailable‘]").val(1).checked= true;//选中“待测试”

 

2、获取值

  $("input[name=‘IsAvailable‘]:checked").val(); //2
 $("input[name=‘IsAvailable‘]:checked").parent().text(); //待测试

 

3、禁用

 $("input[name=‘IsAvailable‘][value=2]").attr("disabled","true"); //"待测试"禁止选中

 

jquery 对下拉框和单选框的一些操作

标签:

原文地址:http://www.cnblogs.com/sophiading/p/4187254.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!