克隆复制和表单取值

最新推荐文章于 2019-04-11 11:53:33 发布

frost08ds

最新推荐文章于 2019-04-11 11:53:33 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签：克隆表单取值

本文链接：https://blog.csdn.net/frost08ds/article/details/40513897

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文探讨了在HTML表单中如何获取复选框、单选框及下拉框的取值方法，例如使用node.checked获取复选框的布尔状态，通过.value获取下拉框的值。同时提到了onblur()和onchange()事件处理函数的区别，onchange()会在值改变后立即执行。

摘要由CSDN通过智能技术生成

克隆复制 cloneNode()
可以复制指定节点，该方法带一个布尔参数来指示在复制时是包含该节点的所有子节点（称为深度复制）还是仅元素本身
<input type="button" value="复制" οnclick="cloneCopy(('p1'),false;"/>
<input type="button" value="深度复制" οnclick="cloneCopy(('p1'),true);"/>
function cloneCopy(nodeId,deep){
var toClone=document.getElementById("nodeId");
var clonednode=toclone.clonenode(deep);
}

复选框和单选框取值

checkbox node.checked; 得到的是一个布尔参数

这个是单选框取值
var radio1=$("g1").checked;
var radio2=$("g2").checked;
var radio3=$("g3").checked;
if(radio1==true) var gender="男";
else if(radio2==true) var gender="女";
else if(radio3==true) var gender="人妖";
这个是复选框取值
var check1=$("check1").checked;
var check2=$("check2").checked;
var check3=$("check3").checked;
var check4=$("check4").checked;
if(check1==true) var it1="看书 "; else it1="";
if(check2==true) var it2="瑜伽 "; else it2="";
if(check3==true) var it3="上网 "; else it3="";
if(check4==true) var it4="跆拳道"; else it4="";

下拉框取值 .value

第一个下拉框
var select1=$("sanwei1").value;
第二个下拉框
var select2=$("sanwei2").value;
也可以用 $("sanwei1").options[0].value;

表单字段共性
onblur() 失去焦点时触发
onchange() 文本框值改变后，失去焦点时触发
onfocus() 获得焦点时触发

注意：onblur()和onchange()的区别，在于后者是先执行

下面这个例子就是如何取表单里的值

<!DOCTYPE html>
<html>
	<head>
		<title>输入信息</title>
		<meta charset="utf-8">
		<style type="text/css">
			form{
				width: 500px;
				height: 500px;
				background: lightblue;
				float: left;
				margin-left: 50px;
				margin-top: 100px;
			}
			div{
				margin-top: 30px;
			}
			input[type="text"]{
				padding-left: 10px;
			}
			#id5{
				margin-left: 100px;
			}
			input[type="button"]{
				width: 100px;
				height: 50px;
				font-size: 25px;
				background: lightcoral;
			}
		</style>
	</head>
	<body>
	 	<form action="#" method="post" id="form1">
	 		<h1>请输入信息</h1>
	 		<div id="id1"><span>姓名：</span><input type="text" size="30" maxlength="25" value="" id="text"/></div>
	 		<div id="id2"><span>性别：</span><input type="radio" name="gender" id="g1" value="男">男</input><input type="radio" name="gender" id="g2" value="女">女</input><input type="radio" name="gender" id="g3" value="人妖">人妖</input></div>
	 		<div id="id3"><span>三围：</span><select id="sanwei1" name="sanwei1">
	 		<option value="tou">头围</option><option value="60cm">60cm</option><option value="50cm">50cm</option><option value="55cm">55cm</option></select>
	 		<select id="sanwei2" name="xiongwei"><option value="xiong">胸围</option><option value="60cm">60cm</option><option value="70cm">70cm</option><option value="80cm">80cm</option>
	 		</select>
	 		<select id="sanwei3" name="sanwei3"><option value="yao">腰围</option><option value="60cm">60cm</option><option value="50cm">50cm</option><option value="55cm">55cm</option></select>
	 		</div>
	 		<div id="id4"><span>你喜欢：</span><input type="checkbox" value="看书" id="check1">看书</input><input type="checkbox" value="瑜伽" id="check2">瑜伽</input><input type="checkbox" value="上网" id="check3">上网</input><input type="checkbox" value="跆拳道" id="check4">跆拳道</input></div>
	 		<div id="id5"><input type="button" value="提交" οnclick="func()" /></div>
	 	</form>
	 	<form action="#" method="post" id="form2">
	 		<h1>请确认信息</h1>
	 	</form>
	 	<script type="text/javascript">
	 		function $(id){
                return document.getElementById(id);
            }
            var a=$("form2");
            var b=$("form1");
            var c=$("text");
            function func(){
            	// 取文本框
            	var p1=document.createElement("p");
            	var text=c.value;
            	var text1=document.createTextNode("姓名："+text);
            	p1.appendChild(text1);
            	a.appendChild(p1);
            	// 去单选框
            	var p2=document.createElement("p");
            	var radio1=$("g1").checked;
            	var radio2=$("g2").checked;
            	var radio3=$("g3").checked;
            	if(radio1==true) var gender="男";
            	else if(radio2==true) var gender="女";
            	else if(radio3==true) var gender="人妖";
  				var text2=document.createTextNode("性别："+gender);
            	p2.appendChild(text2);
            	a.appendChild(p2);
            	// 去下拉框
            	var p3=document.createElement("p");
            	var select1=$("sanwei1").value;
            	var select2=$("sanwei2").value;
            	var select3=$("sanwei3").value;
            	var text4=document.createTextNode("三围："+"头围 "+select1+" 胸围 "+select2+" 腰围 "+select3);
            	p3.appendChild(text4);
            	a.appendChild(p3);
            	// 去复选框
            	var check1=$("check1").checked;
            	var check2=$("check2").checked;	 
            	var check3=$("check3").checked;	 
            	var check4=$("check4").checked;
            	if(check1==true) var it1="看书 "; else it1="";
            	if(check2==true) var it2="瑜伽 "; else it2="";
            	if(check3==true) var it3="上网 "; else it3="";
            	if(check4==true) var it4="跆拳道"; else it4="";
            	var p4=document.createElement("p");
            	var text3=document.createTextNode("你喜欢："+it1+it2+it3+it4);
            	p4.appendChild(text3);
            	a.appendChild(p4);	 	 
            }
	 	</script>
	</body>
</html>