JS 中 常用取控件值的方法

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()  是取下拉框