<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>前端思考：专注前端开发，关注用户体验 &#187; 获取表单值</title>
	<atom:link href="http://www.artcss.com/archives/tag/%e8%8e%b7%e5%8f%96%e8%a1%a8%e5%8d%95%e5%80%bc/feed" rel="self" type="application/rss+xml" />
	<link>http://www.artcss.com</link>
	<description>一个像素的距离...</description>
	<lastBuildDate>Sat, 12 Feb 2011 03:34:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>一步一步学习js，获取表单值</title>
		<link>http://www.artcss.com/archives/253.html</link>
		<comments>http://www.artcss.com/archives/253.html#comments</comments>
		<pubDate>Sun, 27 Sep 2009 03:34:00 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[个人随笔]]></category>
		<category><![CDATA[获取表单值]]></category>

		<guid isPermaLink="false">http://www.artskin.cn/blog/?p=253</guid>
		<description><![CDATA[获取表单值,并输出在相应的标签中 Download script.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 function $&#40;id&#41;&#123; [...]]]></description>
			<content:encoded><![CDATA[<p>获取表单值,并输出在相应的标签中</p>

<div class="wp_codebox_msgheader"><span class="right"></span><span class="left2">Download <a href="http://www.artcss.com/wp-content/plugins/wp-codebox/wp-codebox.php?p=253&amp;download=script.js">script.js</a></span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p2532"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
</pre></td><td class="code" id="p253code2"><pre class="javascript" style="font-family:Verdana;"><span style="color: #003366; font-weight: bold;">function</span> $<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #990000;">getElementById</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> fm <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;fm&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> Show <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Show&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> Show2 <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Show2&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> skill <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;skill&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> OutputText<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>fm.<span style="color: #990000;">content</span>.<span style="color: #990000;">value</span><span style="color: #339933;">!=</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		Show.<span style="color: #990000;">innerHTML</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;您输入的内容是：&lt;span&gt;&quot;</span><span style="color: #339933;">+</span>fm.<span style="color: #990000;">content</span>.<span style="color: #990000;">value</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&lt;/span&gt;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
		Show.<span style="color: #990000;">innerHTML</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;&lt;em&gt;您没有输入任何内容！&lt;/em&gt;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> len <span style="color: #339933;">=</span> fm.<span style="color: #990000;">skills</span>.<span style="color: #990000;">length</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> checkskill<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> bool<span style="color: #339933;">=</span><span style="color: #ff0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> thischecked <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #ff0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> e<span style="color: #339933;">=</span>fm.<span style="color: #990000;">skills</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #990000;">checked</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			thischecked<span style="color: #339933;">=</span>thischecked<span style="color: #339933;">+</span>e.<span style="color: #990000;">value</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #339933;">;</span>
			Show2.<span style="color: #990000;">innerHTML</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;您擅长:&lt;span&gt;&quot;</span><span style="color: #339933;">+</span>thischecked<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&lt;/span&gt;&quot;</span><span style="color: #339933;">;</span>
			bool<span style="color: #339933;">++;</span>
	   <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>bool<span style="color: #339933;">==</span><span style="color: #ff0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		Show2.<span style="color: #990000;">innerHTML</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;&lt;em&gt;您没选择&lt;/em&gt;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> checkAll<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j <span style="color: #339933;">=</span> <span style="color: #ff0000;">0</span><span style="color: #339933;">;</span> j <span style="color: #339933;">&lt;=</span> len<span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> e<span style="color: #339933;">=</span>fm.<span style="color: #990000;">skills</span><span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #990000;">checked</span> <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> e.<span style="color: #990000;">checked</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> uncheckAll<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j <span style="color: #339933;">=</span> <span style="color: #ff0000;">0</span><span style="color: #339933;">;</span> j <span style="color: #339933;">&lt;=</span> len<span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> e<span style="color: #339933;">=</span>fm.<span style="color: #990000;">skills</span><span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #990000;">checked</span> <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> e.<span style="color: #990000;">checked</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> switchAll<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j <span style="color: #339933;">=</span> <span style="color: #ff0000;">0</span><span style="color: #339933;">;</span> j <span style="color: #339933;">&lt;=</span> len<span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> e<span style="color: #339933;">=</span>fm.<span style="color: #990000;">skills</span><span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		e.<span style="color: #990000;">checked</span> <span style="color: #339933;">=</span> <span style="color: #339933;">!</span>e.<span style="color: #990000;">checked</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_02VPu7">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;meta name=&quot;author&quot; content=&quot;artskin@163.com,guliqiang&quot; /&gt;
&lt;meta name=&quot;Keywords&quot; content=&quot;前端思考&quot; /&gt;
&lt;meta content=&quot;all&quot; name=&quot;robots&quot; /&gt;
&lt;title&gt;js获取表单值 || 前端思考&lt;/title&gt;
&lt;style&gt;
&lt;!--
body{font-family:Microsoft YaHei,calibri,verdan;font-size:14px;}
span{color:#f00;border-bottom:1px solid #999;padding:0 6px;word-spacing:10px;font-weight:bold}
em{color:#f00;font-style:normal}
#skill{border:1px solid #ccc;padding:10px;width:600px;;-webkit-border-radius:4px;-moz-border-radius: 4px;}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h3&gt;一、js获取表单值&lt;/h3&gt;
&lt;form name=&quot;form&quot; id=&quot;fm&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;content&quot; size=&quot;50&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot;输出文本&quot; name=&quot;B1&quot; onclick=&quot;OutputText()&quot; /&gt;
&lt;p id=&quot;Show&quot;&gt;&lt;/p&gt;
&lt;h3&gt;二、获取checkbox的值,全选，取消，反选&lt;/h3&gt;
&lt;h4&gt;选择您擅长的技术：&lt;/h4&gt;
&lt;div id=&quot;skill&quot;&gt;
&lt;input type=&quot;button&quot; name=&quot;B1&quot; onclick=&quot;checkAll()&quot; value=&quot;全选&quot; /&gt;
&lt;input type=&quot;button&quot; name=&quot;B1&quot; onclick=&quot;uncheckAll()&quot; value=&quot;取消选择&quot; /&gt;
&lt;input type=&quot;button&quot; name=&quot;B1&quot; onclick=&quot;switchAll()&quot; value=&quot;反选&quot; /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill1&quot; value=&quot;Xhtml&quot; /&gt;Xhtml
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill2&quot; value=&quot;CSS&quot; /&gt;CSS
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill3&quot; value=&quot;Javascript&quot; /&gt;Javascript
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill4&quot; value=&quot;PHP&quot; /&gt;PHP
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill6&quot; value=&quot;Ajax&quot; /&gt;Ajax
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill7&quot; value=&quot;Java&quot; /&gt;Java
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill8&quot; value=&quot;C#&quot; /&gt;C#
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill9&quot; value=&quot;C++&quot; /&gt;C++
&lt;input type=&quot;checkbox&quot; name=&quot;skills&quot; id=&quot;skill10&quot; value=&quot;SQL&quot; /&gt;SQL
&lt;input type=&quot;button&quot; value=&quot;提交&quot; name=&quot;B1&quot; onclick=&quot;checkskill()&quot; /&gt;
&lt;br /&gt;
&lt;/div&gt;
&lt;p id=&quot;Show2&quot;&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;script type=&quot;text/javaScript&quot;&gt;
function $(id){
	return document.getElementById(id)
}
var fm = $(&quot;fm&quot;);
var Show = $(&quot;Show&quot;);
var Show2 = $(&quot;Show2&quot;);
var skill = $(&quot;skill&quot;);
//alert(fm+&quot;|&quot;+Show);
function OutputText(){
	if(fm.content.value!=&quot;&quot;){
		Show.innerHTML=&quot;您输入的内容是：&lt;span&gt;&quot;+fm.content.value+&quot;&lt;/span&gt;&quot;;
	}else{
		Show.innerHTML=&quot;&lt;em&gt;您没有输入任何内容！&lt;/em&gt;&quot;;
	}
}
var len = fm.skills.length;
function checkskill(){
	var bool=0;
	var thischecked = new Array();
	for (var i=0; i&lt;len; i++){
		var e=fm.skills[i];
		if (e.checked){
			//alert(e.value)
			thischecked=thischecked+e.value+&quot; &quot;;
			Show2.innerHTML=&quot;您擅长:&lt;span&gt;&quot;+thischecked+&quot;&lt;/span&gt;&quot;;
			bool++;
	   }
	}
	if(bool==0){
		Show2.innerHTML=&quot;&lt;em&gt;您没选择&lt;/em&gt;&quot;;
	}
}
function checkAll() {
	for (var j = 0; j &lt;= len; j++) {
		var e=fm.skills[j];
		if (e.checked == false) e.checked = true;
   }
}
function uncheckAll() {
	for (var j = 0; j &lt;= len; j++) {
		var e=fm.skills[j];
		if (e.checked == true) e.checked = false;
   }
}
function switchAll() {
	for (var j = 0; j &lt;= len; j++) {
		var e=fm.skills[j];
		e.checked = !e.checked;
	}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_02VPu7');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_02VPu7');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/253.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

