jquery 操作单选框，复选框，下拉列表

1、复选框全选操作：其实说到底就是对Jquery 选择器的运用，点我查看Jquery选择器
html代码:

<form>  
   您爱好的运动是：  
   <input type="checkbox" name="item" value="football"/> football  
   <input type="checkbox" name="item" value="basketball"/> basketball  
   <input type="checkbox" name="item" value="badminton"/> badminton  
   <input type="checkbox" name="item" value="pingpong"/> pingpong  
   <input type="button" id="checkAll" value="全选"/>                  
   <input type="button" id="checkFootball" value="选中足球"/>  
</form>  

Jquey js 脚本:

$('#checkAll').click (checkAll);    // 全选                        
   $('#checkFootball').click (checkFootball); // 单选足球   
});  
function checkAll()  
{  
   $('input [type="checkbox"][name="item"]').attr ("checked", true);  
   //  $('[name="item"]:checkbox').attr("checked", true);  
}

注： 全反选只需要将这里的 true 换成 false 即可。 
选中足球操作
Jquey js 脚本:

function checkFootball()  
{  
   $(" [name='item']:checkbox").each(function () {  
       if (this.value == 'football')  
       {  
          this.checked = true;  
       }  
   })     
}  

注： 具体目的为了解决从后台取出数据，显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值，改用了JavaScript原生的 Dom 方法，将比创建 jQuery对象更有效
2. 单选按钮操作
html代码:

A B C D 您选择哪一个：<br/>  
<input type="radio" name="item" value="A"/>A  
<input type="radio" name="item" value="B"/>B  
<input type="radio" name="item" value="C"/>C  
<input type="radio" name="item" value="D"/>D  
<input type="button" id="getLetter" value="获得字母 "/> 

初始化选中字母B
Jquey js 脚本:

$(document).ready(function()  {                     
   // 数据初始化选择B。  
   $('[name="item"]:radio').each(function() {  
       if (this.value == 'B')  
       {  
          this.checked = true;  
       }      
    });  
  
    // 绑定获得字母的事件   
    $('#getLetter').click(getLetter);  
});  

获得所选中的字母 
Jquey js 脚本:

function getLetter()  
{  
  alert('获得的字母为：' + $('[name="item"][checked=true]:radio').val());  
}  

3. 下拉框(列表)操作 

<select multiple id="choose" style="width=100px;heigth=160px"></select>  
<input id="addOptions" type="button" value="添加数据"/>  
<input id="getSelectedOption" type="button" value="获得选中的值"/>  
<input id="clearOptions" type="button" value="清空列表"/>  

Jquey js 脚本:

$(document).ready(function() {  
    $('#addOptions').click(addOptions);  // 为列表添加元素  
                         
    $('#getSelectedOption').click(getSelectedOption);  // 获得选中的元素  
                      
    $('#clearOptions').click(clearOptions); // 清楚列表中的元素  
                      
    $('#addOptions').click(); // 触发为列表添加元素事件  
});  

追加元素
Jquey js 脚本:

function addOptions()  
{  
   var selectContainer = $('#choose');  
                  
   for (var i = 0; i < 5; i++)  
   {  
      var option = $('<option></option>').text('choose' + i).val(i);  
      selectContainer.append(option);  
   }  
}  

获得选中的元素 

function getSelectedOption()  
{  
     /* 逐个弹出每个元素 */  
    var options = $('#choose > option:selected');  
                    
    $.each(options, function () {  
      alert('option: ' + this.value);  
    });  
                    
    /* 逐个弹出每个元素，第一种的简写 */                   
    $('#choose > option:selected').each(function() {  
      alert('option2: ' + this.value);  
     });  
  
     // 直接弹出数据， 如果是对下拉框，则直接弹出数据，如果是列表并且选择了多个数  
     //   据，将数据以'，'分隔显示    
     alert('val: ' + $('#choose').val());  
}  

清空列表 

function clearOptions()  
{  
    $('#choose').empty();  
}

常用的：

 var ddl = $("#ddlDiaryType option:selected").text();//下拉别表

 var reb = $("#RbIfprivate [checked=true]:radio").val();//单选框