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

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

1、复选框全选操作 ：
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. 下拉框(列表)操作 
html代码:

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

获得选中的元素 
Jquey js 脚本:

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

清空列表
Jquey js 脚本:

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