欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

分享jquery如何实现表单回显-知了汇智

分享jquery如何实现表单回显

       前文我们给大家分享了jquery中如何获取表单元素,今天给大家分享jquery如何实现表单回显
  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;
		        				           }
		        		       }
		        		    } 
		        }

分享jquery如何实现表单回显
  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);
			});
					}
	})
  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端时使用
132 2811 3191
预约免费试学
点击咨询
预约试学