JS 中 常用取控件值的方法

<span style="font-size:14px;"><form   id="formid"  name="formname">
        用户名:<input  type="text"   name="username" />      

        密码1:<input   type="password"    name="passwordname" />  <br>
        密码2:<input   type="password"    name="passwordname" />  <br></span>
<span style="font-size:14px;"> </span>
<span style="font-size:14px;">        男:<input type="radio"  name="sex"  value="男" />
        女: <input type="radio"  name="sex"  value="女" />       <br>   </span>
<span style="font-size:14px;"> </span>
<span style="font-size:14px;">        上网<input type="checkbox"  name="interest"  value="上网">
        运动<input type="checkbox"  name="interest"  value="运动">
        锻炼<input type="checkbox"  name="interest"  value="锻炼">     <br>   
   
        所在的城市:    <select  name="city"   id="city" >
                                  <option  value="哈尔滨"> 哈尔宾 </option>
                                  <option  value="吉林"> 吉林 </option>
                                  <option  value="齐齐哈尔"> 齐齐哈尔 </option>     
    
                                  </select>       <br>
        
             <input  type="button"  value="取文本框 "    οnclick="getValue1()" />
             <input  type="button"  value="取密码框 "    οnclick="getValue2()" />
             <input  type="button"  value="取单选框 "    οnclick="getValue3()" />
             <input  type="button"  value="取复选框 "    οnclick="getValue4()" />
             <input  type="button"  value="取下拉框 "    οnclick="getValue5()" />
             
        
   </form>
</span>
<span style="font-size:14px;">function  getValue1()
  {
        alert(document.all.username.value);//两种方式
        alert(document.getElementsByName("username")[0].value);
  }

</span>

getValue1()  是取文本框  有两种方式 document.all  固定写法  username是 控件名 value是捕获你输入的值

                    此方法只是用于你用的所有控件名中只有一个叫username 的 要是还有一个或是多个就不能用它

                    所以还有第二种方法document.getElementsByName("username")[0].value       到密码框再说

 

<span style="font-size:14px;">function  getValue2()
  {
     alert(document.getElementsByName("passwordname")[0].value);
     alert(document.getElementsByName("passwordname")[1].value);    
  }</span>

getValue2()  是取密码框    document.getElementsByName("passwordname")[0].value

                     [0]就是第一个元素  就是你输入的第一个密码  [1]就是第二个元素  就是你输入的第二个密码

 

<span style="font-size:14px;">function  getValue3()
  {
      var  form=document.getElementById("formname");
      for(var i = 0;i < form.sex.length;i++)
      {
        if(form.sex[i].checked)
        {
            alert(form.sex[i].value);
        }
      }
  }
  </span>

getValue3()  是取单选框     formname是表单名

 

<span style="font-size:14px;">function  getValue4()
  {
      var  form=document.getElementById("formname");
      for(var i = 0;i < form.interest.length;i++)
      {
        if(form.interest[i].checked)
        {
            alert(form.interest[i].value);
        }
      }
  }</span>

getValue4()  是取复选框

 

<span style="font-size:14px;">function  getValue5()
  {
       var  city = document.getElementById('city');//""  '' 都好使
         for(var i = 0;i < city.options.length;i++)
        {
            if(city.options[i].selected)
            {
            alert(city.options[i].value);
            }
        }
  }</span>

 

getValue5()  是取下拉框