项目开发中常用JS表单取值方法

最新推荐文章于 2024-06-20 08:52:46 发布

原创最新推荐文章于 2024-06-20 08:52:46 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #J# #Web

每天java 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何通过JavaScript获取HTML表单元素的值，包括文本框、复选框、单选按钮、下拉列表等常见控件。针对不同类型的表单控件提供了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的)
         1.form1.TextBox1.value
         2.var txt = document.all.TextBox1;
           txt.value
         3.var txt = document.all["TextBox1"];
           txt.value
         4.document.getElementById("TextBox1");

二.
1.html复选框(name相同)
表单： <input id="Checkbox1" type="checkbox" name="chk" value="123" />sss
        <input id="Checkbox2" type="checkbox" name="chk" value="456"/>aaa
        <input id="Checkbox3" type="checkbox" name="chk" value="789"/>bbb

实现功能：遍历html复选框，得到所选中项
    var oChks = document.all.chk;
    for(var i=0; i<oChks.length; i++)
    {
         if(oChks[i].checked)
     alert(oChks[i].value);
    }

2.html单选框(name相同)
表单： <input id="Radio1" type="radio" name="rad" value="123"/>123
        <input id="Radio2" type="radio" name="rad" value="456"/>456
实现功能：遍历html复选框，得到所选中项
代码同html复选框

3.html下拉列表框
表单：<select id="Select1" multiple>
     <option value=1>1</option>
     <option value=2>2</option>
       </select>
实现功能：
    3.1得到所选中项的text和value值(选择一项)
     var selDrp = document.all.Select1;
     alert(selDrp.options[selDrp.selectedIndex].text);
     alert(selDrp.options[selDrp.selectedIndex].value);
    3.2得到所选中项的text和value值(选择多项)
     for(var j=0;j<selDrp.options.length;j++)
     {
           if(selDrp.options[j].selected)
           {
      alert(selDrp.options[j].value);
           }
     }
4.DropDownList控件与ListBox控件
实现功能：得到所选中项的text和value值
代码同html下拉列表框

5.CheckBoxList控件
实现功能：得到所选中项的text
代码：
         var chklist = document.all("CheckBoxList1");
         var i = 0;
         for(i=0;i<chklist.rows.length;i++)
         {
    var name = "CheckBoxList1_" + i;
    var tmpChecked = document.all[name].checked;
                 if(tmpChecked)
                 {
     alert(document.all[name].parentElement.innerText);
                  　
                  }
        }