jquery获取表单元素与回显

原创

wespten 2023-02-23 21:52:14 博主文章分类：全栈前端开发 ©著作权

文章标签 html 表单 i++ 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wespten的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、获取哦表单元素

dcoument表单文本对象的集合

all[] 对所有html元素的访问

forms 返回对文档中所有form对象的引用

forms[1] 对所有form对象引用

<script type="text/javascript">
     function fun(){
      document.all[11].innerHTML = "你好" ;

      document.forms[1].username.value = "张无忌" ;

      document.images[2].src = "images/1.jpg" ;
     }
  </script>
 <body onload = "fun()">
     <P></p>
   <form method="post" action="">
      姓名1:<input type="text" name="">
   </form>
   <form method="post" action="">
      姓名2:<input type="text" name="username">
   </form>
   <form method="post" action="">
      姓名3:<input type="text" name="">
   </form>

   <img src = "" alt = "aa"><img src = "" alt = "bb"><img src = "" alt = "cc">
 </body>

通过集合来访问相应的对象
1.通过下标的形式
2.通过name形式

下标
alert(document.forms[1].name)
name属性
alert(document.forms["myform1"].text1.value)

<form name="myform" id="form1">
 <input type="text" name="text1" value="张三">
 <input type="text" name="text2" value="李四">

</form>
<form name="myform1" id="form2">
 <input type="text" name="text1" value="张五">
 <input type="text" name="text2" value="李四">

</form>

C. anchors 返回对文档中所有anchors 对象的引用

D.images 返回对文档中所有image 对象的引用
F.links 返回对文档中所有area 对象和link对象的引用

一、获取表单

1.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.

<form name="tt" id="t"></form>
function checkform(id)
{
   var formlist = document.getElementById(id).childNodes;
   for(var i=0;i<formlist.length;i++)
    {
     alert(formlist[i].type)
     alert(formlist[i].value)
    }
}

2.element获取所有表单元素

表单对象.elements 获得表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements["name"]
表单对象.elements.name

window.onload=function(){
  var form=document.myform
  var element=form.elements
}
<body>
<form name="myform">
  <input type="text" name="username" value="baidu.com"><br>
  <input type="text" name="address" value="青岛"><br>
  <select name="kecheng">
    <option value="css" selected="">css</option>
    <option value="div">div</option>
  </select>
</form>
<input type="button" id="bt" value="查看效果"/>
</body>

jquery获取表单元素与回显_表单

var eles=document.myform.elements.length;
alert(eles)

var names=document.myform.elements[0].value;
var names=document.myform.elements["names"].value;
var names=document.myform.elements.names.value;

3.forms[1] 对所有form对象引用

<script type="text/javascript">
     function fun(){
      document.all[11].innerHTML = "你好" ;

      document.forms[1].username.value = "张无忌" ;

      document.images[2].src = "images/1.jpg" ;
     }
  </script>
 <body onload = "fun()">
     <P></p>
   <form method="post" action="">
      姓名1:<input type="text" name="">
   </form>
   <form method="post" action="">
      姓名2:<input type="text" name="username">
   </form>
   <form method="post" action="">
      姓名3:<input type="text" name="">
   </form>

   <img src = "" alt = "aa"><img src = "" alt = "bb"><img src = "" alt = "cc">
 </body>

取出窗体中的所有表单的数量:document.forms.length

二、获取表单中的标签元素

1.文本域 : 操作文本域的值 value 属性，设置或者获取值

var names=document.forms[0].elements.names.value="lisi";
alert(names)

文本域回显

<p style="margin-top: -22px; padding-left: 40px;"><input type="text" name="matainReasonRemark" class="long"/></p>

  $.ajax({
     type : "POST",
     url : uxl,
     data : param,
     success : function(list) {
            var matainReasonRemark= obj.data.MATAIN_REASON_REAMRK;
            $("input[name='matainReasonRemark']").val(matainReasonRemark);
      });
     },
     error : function(data) {
          
     },
 });

三、表单校验

1.onsubmit 当表单提交的时候触发的事件
2.onblur
3.onfocus
4.onchange

非空

<script>
  function check (obj) {
    if(obj.names.value==""){
    alert("姓名不能为空");
    return false;
  }
  if(obj.age.value==""){
   alert("年龄不能为空");
    return false;
   }
     var statu=0;
   for (var i=0; i<obj.sex.length; i++) {
    if(obj.sex[i].checked){
      statu=1;
    }
   }
   if(!statu){
     alert("性别不能为空");
     return false; //阻止事件的默认行为(适用于所有事件)
   }
  }
</script>

<form name="myform" id="form1" action="" method="post" onsubmit=" return check(this)">
   性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>
</form>

四、表单提交

<script>
  window.onload=function  () {
    var subs=document.myform.subs;
   subs.onclick=function  () {
    document.myform.action="1.html";
      document.myform.submit();
  }

  setTimeout(function  () {
     document.myform.action="2.html";
      document.myform.submit();
  },4000)
  }
</script>

<form name="myform" action="" method="post">
<input type="text" name="names">
<input type="button" value="提交" name="subs">
</form>

二、表单回显

innerhtml的值是表单元素的值:如how are you,则innerhtml的值就是:how are you

innertext的值和上面的一样,只不过不会把em这种标记显示出来.

获取div的内容使用$('#example').html()

或者要文本可以使用$('#example').text()
要获取input的值可以使用$('#example').val()

一、html()

用为读取和修改元素的HTML标签对应js中的innerHTML

html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素

<p>
    <strong>Hi!</strong>
</p>

---------------------

$('p').html();//返回p元素的全部内容，包括内容里的标签，返回:<strong>Hi!</strong>

---------------------

$('td[aria="View_CHECK_NAME"]').each(function(){
  if($(this).html()=="yes"){
    $(this).attr("style","color:red; text-align:center;cursor:pointer");
  }
})

二、text()

用来读取或修改元素的纯文本内容对应js中的innerText

text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上

<p>
    <strong>Hi!</strong>
</p>

---------------------
$('p').text();/*返回p元素的文本内容，不包括内容里的标签，只返回:Hi! */

---------------------

text()和html()的区别 :

(1)text()只能返回文本内容，而html()可以返回元素的全部内容 (2)text(str)设置元素内容时，只有文本内容有效，其余内容无效；而html(str)设置元素内容时，所有内容有效(包括标签） (3)text()返回所有匹配元素的内容，叠加；而html()只返回第一个匹配元素的内容

<p>Hi!</p><p>Hello!</p>

---------------------

$('p').text();//返回内容为所有p元素的内容叠加:Hi!Hello!

---------------------

$('p').html();//返回内容为第一个p元素的内容:Hi!

---------------------

三、val();

用来读取或修改表单元素的value值，如button,text,hidden

val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上

val是属性，只有有该属性的对象才能调用

<input type='text' value='xxx'/> 这个就需要用 val()。

关于三者的区别

1. .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

$('p').html();    　　　　　　　　　　 //返回p元素的html内容
$("p").html("Hello <b>nick</b>!");  //设置p元素的html内容
$('p').text();    　　　　　　　　　　 //返回p元素的文本内容
$("p").text("nick");    　　　　　　　//设置p元素的文本内容
$("input").val();    　　　　　　　　 //获取文本框中的值
$("input").val("nick");     　　　　 //设置文本框中的内容

2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

<script type="text/javascript">
       $(document).ready(function(){
           $("#btn1").click(function(){
              $(".aa").text(function(i,oriText){
                alert("原文本："+oriText+"新文本：hello world! index("+i+")");
              });
           });
       });
 
 
   </script>
  </head>
  <body>
     <button id="btn1">测试下标</button>
     <div>
        <p class="aa">aa1</p>
        <p class="aa">aa2</p>
        <p class="aa">aa3</p>
        <p class="aa">aa4</p>
        <p class="aa">aa5</p>
     </div

这样每次的index依次为0,1,2,3,4;

选择框数据回显

单选按钮 : 返回或者设置单选的选中状态 true 选中，false 未选中。value 属性获取选中的值，必须先判断选中状态。

var sex=document.myform.sex;
        sex[0].checked=true;
       for (var i=0; i<sex.length; i++) {
       if(sex[i].checked){
         alert(sex[i].value)
       }
       }

多选按钮 : checked 返回或者设置单选的选中状态true 选中,false 未选中。value 属性获取选中的值，必须先判断选中状态。

var likes=document.forms.myform["like[]"];
      likes[2].checked=true;
    for (var i=0; i<likes.length; i++) {
       if(likes[i].checked){
       alert(likes[i].value);
     }
    }

多选按钮数据回显

<p>
<label><input type="checkbox" name="matainReason" value="1"/>1、无关闭</label>
<label><input type="checkbox" name="matainReason" value="2"/>2、升高</label>
<label><input type="checkbox" name="matainReason" value="3"/>3、降低</label>
<label><input type="checkbox" name="matainReason" value="4"/>4、压力低</label>
<label><input type="checkbox" name="matainReason" value="5"/>5、压力不稳</label>
<label><input type="checkbox" name="matainReason" value="6"/>6、漏气</label>
<label><input type="checkbox" name="matainReason" value="7"/>7、定期</label>
</p>


$.ajax({
     type : "POST",
     url : uxl,
     data : param,
     success : function(list) {
      $.each(list,function(index,obj){
        var matainReason = obj.data.MATAIN_REASON;
        var matainReasonArr = matainReason.split(",");
        var matainReasonBox = $("input[name='matainReason']");
            for(var i=0;i<matainReasonArr.length;i++){
            $.each(matainReasonBox,function(j,checkbox){
            var checkValue=$(checkbox).val();
            if(matainReasonArr[i]==checkValue){
               $(checkbox).attr("checked",true);
              }
            })
            }
            
      });
     },
     error : function(data) {
          
     },
 });

多选框数据回显

<tr style="height: 200px">
                    <td style="width: 180px" colspan="9">
                    <label style="font-size:15px;">培训内容:</label><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="1"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">灶具零部件的使用方式方法</label><br /><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="2"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">胶管、减压器、卡箍更换周期</label><br /><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="3"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">钢瓶使用安全注意事项</label><br /><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="4"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">其他</label><br /><br />
                      </td>
                    </tr>

var boxObj = $("input:checkbox[name='trainContent']");  //获取所有的复选框
                var expresslist = data.data.trainContent; //用el表达式获取在控制层存放的复选框的值为字符串类型
                if(null!=expresslist){
              var express = expresslist.split(','); //去掉它们之间的分割符“，” 
                  for(i=0;i<boxObj.length;i++){
                       for(j=0;j<express.length;j++){            
                             if(boxObj[i].value == express[j])  //如果值与修改前的值相等
                             {
                                   boxObj[i].checked= true;
                                   break;
                               }
                       }
                    } 
            }



                  <tr style="height: 200px">
                    <td style="width: 180px" colspan="9">
                    <label style="font-size:15px;">培训内容:</label><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="1"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">灶具零部件的使用方式方法</label><br /><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="2"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">胶管、减压器、卡箍更换周期</label><br /><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="3"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">钢瓶使用安全注意事项</label><br /><br />
                      <input type="checkbox" name="trainContent" id="trainContent" value="4"  style="width: 20px;height: 20px;padding: 6px 6px 6px 6px"/><label style="font-size:15px;padding: 6px 6px 6px 6px";">其他</label><br /><br />
                      </td>

jquery获取表单元素与回显_html_02

selected 设置或返回下拉框的选中状态,true 选中,false 未选中。selectedIndex 设置或返回下拉框被选中的索引号

var school=document.myform.school;
 var school=document.myform.school.options;
 alert(school.length)
 //selected设置选中状态
 school[1].selected=true;
 //selectedIndex设置选中状态
 school.selectedIndex=2;

<form id="form1" name="form1">
文本框 ：<input type="text" id="txt" value="txt" />
<br />
单选按钮：<input type="radio" value="男" name="sex" />男    <input type="radio" value="女" name="sex"  checked="checked"/>女
<br />
复选框：<input type="checkbox" value="1"  name="check[]"/>1<input type="checkbox" value="2" checked="checked"  name="check[]" />2<input type="checkbox" value="3" checked="checked"  name="check[]" />3
<br />   
下拉框：
<select id="sel" style="width: 100px">
<option value="yi">1</option>
<option value="er" selected="selected">2</option>
<option value="san">3</option>
</select>
<br />
<input type="button" value="获取"  onclick="getVal()"/>
</form>

<script type="text/javascript">
 
function getVal(){
    var str="";
    //获取单选按钮的值
    var radios = document.form1.sex;
    var n = radios.length;
    for (var i = 0; i < n; i++) {
        if (radios[i].checked) {
            str = " 单选 "+radios[i].value;
        }
    }
        //还有获取单选框的值有三种方式：
        $('input:radio:checked').val()；
        $("input[type='radio']:checked").val();
        $("input[name='sex']:checked").val();
 
    //获取复选框中选中的值的组合 1,2,3,4
    var checkboxs = document.getElementsByName('check[]');
    var n = checkboxs.length;
    for (var i = 0; i < n; i++) {
        if (checkboxs[i].checked) {
            str += " 复选框 "+checkboxs[i].value;
        }
    }
    //获取下拉列表的选中项的值
    //方法一：
    str += " 列表 一："+document.getElementById("sel").value;
 
    //方法二：
    var sel = document.getElementById("sel");
    str += " 列表 二："+sel.options[sel.selectedIndex].value;
    alert(str);
 
}
</script>

全选反选

<script type="text/javascript">
    function checkAll(flag){
      //拿到所有的多选框
      var hobbys = document.getElementsByName("hobby") ;
      //循环赋值
      for(var i =0 ;i<hobbys.length ;i++){
        hobbys[i].checked = flag ;
      }
    }

    function reverseCheck(){
      //拿到所有的多选框
      var hobbys = document.getElementsByName("hobby") ;
      //循环赋值
      for(var i =0 ;i<hobbys.length ;i++){
        hobbys[i].checked = !hobbys[i].checked ;
      }
    }
  </script>
 <body>
   <h1>请选择你的爱好：</h1>
  全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
 <input type="checkbox" name="hobby" value="football"/>足球
 <input type="checkbox" name="hobby" value="basketball" />篮球
 <input type="checkbox" name="hobby" value="swim" />游泳
 <input type="checkbox" name="hobby" value="singing"/>唱歌<br/>

 <input type="button" value="全选" onclick="checkAll(true)"/> <input type="button" value="全不选" onclick="checkAll(false)"/>
 <input type="button" value="反选" onclick="reverseCheck()"/> </body>

全选全不选

全选<input type='radio' name='radios'>
全不选<input type='radio' name='radios'>
反选<input type='radio' name='radios'>
//全选
window.onload=function  () {
  var nums=document.getElementsByName("nums");
  var radios=document.getElementsByName("radios");

  for (var i=0; i<radios.length; i++) {
     (function  (a) {
       radios[a].onclick=function  () {
       if(a==0){
         for (var i=0; i<nums.length; i++) {
          nums[i].checked=true;
         }
         }
       }
     })(i)
}

radios[0].onclick=function  () {
   for (var i=0; i<nums.length; i++) {
      nums[i].checked=true;
   }
}

//全不选
radios[1].onclick=function  () {
  for (var i=0; i<nums.length; i++) {
       nums[i].checked=false;
   }
}

//反选
radios[2].onclick=function  () {
 for (var i=0; i<nums.length; i++) {
     if(nums[i].checked){
      nums[i].checked=false;
   }else{
      nums[i].checked=true;
     }
   }
}
}

function fun (a,b,c) {
  c[b].onclick=function  () {
    if(b==0){
     for (var i=0; i<a.length; i++) {
   a[i].checked=true;
   }
  }
    if(b==1){
     for (var i=0; i<a.length; i++) {
   a[i].checked=false;
   }
  }
    if(b==2){
      for (var i=0; i<a.length; i++) {
   if(a[i].checked){
   a[i].checked=false;
   }else{
     a[i].checked=true;
 }
   }
}
 }
 }

通过this实现全选全不选

<ul style="display:block;">       
      <li class="parent expanded"><span><input type="checkbox" checked="checked" id="all"/></span><b><img src="${ctx}/static/images/icon_fold_f.png"/></b>
        <a href="javascript:;">网址</a> 
        <ul class="Item" style="display:block"> 
        </ul>
      </li>

$("#all").change(function() {
    if ($(this).attr("checked")) {
      $(".Item").each(function() {
        $(this).attr("checked", true);
      });
    } else {
      $(".Item").each(function() {
        $(this).attr("checked", false);
      });
          }
  })