在上篇文章給大家介紹了js操作表單實例講解(下)的相關知識，本文接著給大家介紹Javascript操作表單實例講解（下），具體詳情如下所示：
一、文本域
<input type="text" />
-----------------------------
操作文本域的值
value 屬性 設置或者獲取值
-----------------------------
二、單選按鈕和多選按鈕
<input type="radio" /><input type="checkbox" />
----------------------------------------------
checked 返回或設置單選的選中狀態
true 選中 false 未選中
value 屬性 獲取選中的值，必須先判斷選中狀態
----------------------------------------------
example: 全選/全不選/反選
1.PNG
1.dom結構
<body><form name="myform" action="#" method="post" id="form1"><script type="text/javascript">for(var i=0;i<20;i++){document.write("<input type='checkbox' name='nums' />"+(i+1)+"<br>" )}document.write("<input type='radio' name='radios'>全選");document.write("<input type='radio' name='radios'>全不選");document.write("<input type='radio' name='radios'>反選");</script></form></body>2.script腳本
2.1 采用調用函數的方式
<script type="text/javascript">window.onload=function(){var nums=document.getElementsByName("nums");var radios=document.getElementsByName("radios");fun(nums,i,radios);function fun(a,b,c){c[b].onclick=function(){if(b==0){for(var i=0;i<a.length;i++){a[i].checked=true;}}else if(b==1){for(var i=0;i<a.length;i++){a[i].checked=false;}}else if(b==2){for(var i=0;i<a.length;i++){if(a[i].checked){a[i].checked=false;}else{a[i].checked=true;}}}}}</script>2.2 采用在比閉包中創建匿名函數的方式
<script type="text/javascript">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;}}else if(a==1){for(var i=0;i<nums.length;i++){nums[i].checked=false;}}else if(a==2){for(var i=0;i<nums.length;i++){if(nums[i].checked){nums[i].checked=false;}else{nums[i].checked=true;}}}} })(i);}}</script>三、下拉框
<form name="myform"><select name="sels"><option>北京大學</option><option>長安大學</option><option>南京大學</option></select></form>
----------------------------------------
selected 設置或返回下拉框的選中狀態
true 選中 false 未選中
selectedIndex 設置或返回下拉框選中的索引號
----------------------------------------
example1:選中長安大學
<script>var sels=document.myform.sels;//var sels=document.myform.sels.options;//(也可以)sels[1].selected=true;</script>
或者
<script>var sels=document.myform.sels;// var sels=document.myform.sels.options;//(也可以)sels.selectedIndex=1;</script>
example2:單價*數量=總價
1.PNG
1.dom結構
<body><form name="myform" action="#" method="post" id="form1">單價：<input type="text" name="price" value="200"><select name="count">數量<option>1個</option><option>2個</option><option>3個</option></select>總價：<input type="text" name="total" value="200"></form></body>
2.script腳本
<script type="text/javascript">window.onload=function(){var price=document.myform.price;var count=document.myform.count;var total=document.myform.total;count.onchange=function(){ total.value=parseInt(price.value)*(count.selectedIndex+1); }} </script>四、文本區域
<textarea name="info" rows="7" cols="60"></textarea>
----------------------------
value 返回或設置文本區域的值
----------------------------
example:動態檢測文本區域中輸入的字符長度
1.PNG
1.dom結構：
<body><div id="content">一共能輸入20個字符，已輸入0個，還能輸入20個</div><form name="myform" action="#" method="post" id="form1"><textarea name="info" cols="60" rows="7"></textarea></form></body>
2.script腳本：
<script type="text/javascript">window.onload=function(){var content=document.getElementById("content");var info=document.myform.info;info.onkeyup=info.onkeydown=function(){var str=info.value;var length=check(str);var strs=20;if (length<=strs) {content.innerHTML="一共能輸入"+strs+"個字符，已輸入"+length+"個，還能輸入"+(strs-length)+"個";}else{info.value=str.substring(0,strs);} }//檢測中英文function check(str){var num=0;for(var i=0;i<str.length;i++){if(str.charCodeAt(i)>=0 && str.charCodeAt(i)<=255){//英文num++;}else{//中文num+=2;}}return num;}}</script>五、表單驗證
onsubmit 當表單提交的時候觸發的事件
----------------------------------------------------------------------------------------------
<form name="myform" action="www.baidu.com" method="post" onsubmit="return check(this)"></form>return false; //阻止表單默認行為
----------------------------------------------------------------------------------------------
六、submit方法
該方法用來實現自動提交
而事件onsubmit只能用來手動提交
以上所述是小編給大家介紹的Javascript操作表單實例講解（下），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
