javascript获取select,checkbox,radio的值

1.获取和设置select,checkbox,radio的值

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
</ head >
< body >
复选框：
< input  type ="checkbox"  name ="checkbox1"  value ="1"  checked /> 1
< input  type ="checkbox"  name ="checkbox1"  value ="2" /> 2
< input  type ="checkbox"  name ="checkbox1"  value ="3"  checked /> 3
< input  type ="checkbox"  name ="checkbox1"  value ="4" /> 4
< input  type ="checkbox"  name ="checkbox1"  value ="5" /> 5

< br />

单选框：
< input  type ="radio"  id ="radio1"  name ="radio1"  value ="1"  checked > 1
< input  type ="radio"  id ="radio1"  name ="radio1"  value ="2" > 2
< input  type ="radio"  id ="radio1"  name ="radio1"  value ="3" > 3
< br />
下拉框：
< select  id ="select1" >
< option  value ="1" > 1 </ option >
< option  value ="2" > 2 </ option >
< option  value ="3" > 3 </ option >
</ select >
< br />

< button  onclick ="sub();" > 提交 </ button >< br />
< button  onclick ="fun1();" > 选择4，5复选框 </ button >< br />
< button  onclick ="fun2();" > 选择3单选框 </ button >< br />
< button  onclick ="fun3();" > 选择2单选框 </ button >< br />
< script  type ="text/javascript" >
   function  fun1(){
      // 复选框设置值
      var  oCheckbox  =  document.getElementsByName( " checkbox1 " );
      var  arr  =  [];
      var  index  =   0 ;
      for ( var  i = 0 ;i < oCheckbox.length;i ++ )
     {
           if (oCheckbox[i].value  ==   4   ||  oCheckbox[i].value  ==   5 )
          {    
             oCheckbox[i].checked  =   true ;
          } else {
             oCheckbox[i].checked  =   false ;
          }
     }
  }

   function  fun2(){
      // 单选框设置值
      var  oRadio  =  document.getElementsByName( " radio1 " );
      for ( var  i = 0 ;i < oRadio.length;i ++ )
     {
           if (oRadio[i].value  ==   3 )
          {    
             oRadio[i].checked  =   true ;
              break ;
          }
     }
  }

   function  fun3(){
      // 下拉框设置值
      var  oSelect  =  document.getElementById( " select1 " );
     oSelect.value  =   2 ;
  }
  
   function  sub(){
      // 复选框获取值
      var  oCheckbox  =  document.getElementsByName( " checkbox1 " );
      var  arr  =  [];
      var  index  =   0 ;
      for ( var  i = 0 ;i < oCheckbox.length;i ++ )
     {
           if (oCheckbox[i].checked)
          {    
             arr[index ++ ]  =  oCheckbox[i].value;
          }
     }
     alert( " 复选框： " + arr.toString());
   
      // 单选框获取值
      var  oRadio  =  document.getElementsByName( " radio1 " );
      var  rvalue  =   0 ;    
      for ( var  i = 0 ;i < oRadio.length;i ++ )
     {
           if (oRadio[i].checked)
          {    
             rvalue  =  oRadio[i].value;
              break ;
          }
     }
     alert( " 单选框： " + rvalue);


      var  oSelect  =  document.getElementById( " select1 " );
     alert( " 下拉框： " + oSelect.value);
  }
</ script >
</ body >
</ html >

2. JQuery 方式：

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< script  type ="text/javascript"  src ="jquery-1.4.2.min.js" ></ script >
</ head >

< body >
复选框：
< input  type ="checkbox"  name ="checkbox1"  value ="1"  checked /> 1
< input  type ="checkbox"  name ="checkbox1"  value ="2" /> 2
< input  type ="checkbox"  name ="checkbox1"  value ="3"  checked /> 3
< input  type ="checkbox"  name ="checkbox1"  value ="4" /> 4
< input  type ="checkbox"  name ="checkbox1"  value ="5" /> 5

< br />

单选框：
< input  type ="radio"  id ="radio1"  name ="radio1"  value ="1"  checked > 1
< input  type ="radio"  id ="radio1"  name ="radio1"  value ="2" > 2
< input  type ="radio"  id ="radio1"  name ="radio1"  value ="3" > 3
< br />
下拉框：
< select  id ="select1" >
< option  value ="1" > 1 </ option >
< option  value ="2" > 2 </ option >
< option  value ="3" > 3 </ option >
</ select >
< br />

< button  onclick ="sub();" > 提交 </ button >< br />
< button  onclick ="fun1();" > 选择4，5复选框 </ button >< br />
< button  onclick ="fun2();" > 选择3单选框 </ button >< br />
< button  onclick ="fun3();" > 选择2单选框 </ button >< br />
< script  type ="text/javascript" >
  $(document).ready( function (){
    
  });
   function  fun1(){
      // 复选框设置值
      var  oCheckbox  =  $( " input[name=checkbox1] " );
      var  arr  =  [];
      var  index  =   0 ;
      for ( var  i = 0 ;i < oCheckbox.length;i ++ )
     {
           if (oCheckbox[i].value  ==   4   ||  oCheckbox[i].value  ==   5 )
          {    
             oCheckbox[i].checked  =   true ;
          } else {
             oCheckbox[i].checked  =   false ;
          }
     }
  }

   function  fun2(){
      // 单选框设置值
      var  oRadio  =  $( " input[name=radio1] " );
      for ( var  i = 0 ;i < oRadio.length;i ++ )
     {
           if (oRadio[i].value  ==   3 )
          {    
             oRadio[i].checked  =   true ;
              break ;
          }
     }
  }

   function  fun3(){
      // 下拉框设置值
      var  oSelect  =  $( " #select1 " );
     oSelect.val( 2 );
  }
  
   function  sub(){
      // 复选框获取值
      var  oCheckbox  =  $( " input[name=checkbox1] " );
      var  arr  =  [];
      var  index  =   0 ;
      for ( var  i = 0 ;i < oCheckbox.length;i ++ )
     {
           if (oCheckbox[i].checked)
          {    
             arr[index ++ ]  =  oCheckbox[i].value;
          }
     }
     alert( " 复选框： " + arr.toString());
   
      // 单选框获取值
      var  oRadio  = $( " input[name=radio1] " );
      var  rvalue  =   0 ;    
      for ( var  i = 0 ;i < oRadio.length;i ++ )
     {
           if (oRadio[i].checked)
          {    
             rvalue  =  oRadio[i].value;
              break ;
          }
     }
     alert( " 单选框： " + rvalue);


      var  oSelect  =  $( " #select1 " );
     alert( " 下拉框： " + oSelect.val());
  }
</ script >
</ body >
</ html >

-