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


    一.常用表单基本取值方法(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);   
                      
                     }   
            }
  • 相关阅读:
    cropper图片剪裁 , .toBlob()报错
    clipboard异步复制文本(动态获取文本)
    ng-model 数据不更新 及 ng-repeat【ngRepeat:dupes】错误
    MongoVUE的Collections数据不显示的解决方法
    AngularJS监听路由变化
    bootstrap在ie8下,兼容媒体查询
    css3 animation动画特效插件的巧用
    前端图片canvas,file,blob,DataURL等格式转换
    「每日一码」(精品代码,质量保证)阶乘
    「每日一码」(精品代码,质量保证)empty和undefined
  • 原文地址:https://www.cnblogs.com/zxjyuan/p/1376523.html
Copyright © 2020-2023  润新知