昨天學習了Javascript的一些用法，最後簡單的驗證了一些表單的資訊。

隨之實踐的深入，發現表單中有一些標籤如 <input type=" radio ">和<input type="checkbox  ">

這兩個標籤在使用時為多個一起出現功能為單選和多選。例如在DAY2例項表格中的性別和興趣

這時我們所要驗證表單返回的資訊便不是固定的和唯一的，而因此，我們直接獲取其元件的value這種方法便失效了。

那麼我們應該如何去顯示一個正確的選擇資訊呢？

首先我們先看一段程式碼

<tr>
    <td align="right" bordercolor="blue">性&nbsp;別</td>
    <td><input type="radio" name="sex" value="男"/>男 
        <input type="radio" name="sex" value="女"/>女 
        <input type="radio" name="sex"  value="其他"/>其他</td>
</tr>
<tr>
    <td align="right" bordercolor="blue">興&nbsp;趣</td>
    <td><input type="checkbox" name="hobby" value="羽毛球 "/>羽毛球 
        <input type="checkbox" name="hobby" value="籃球"/>籃球 
        <input type="checkbox" name="hobby" value="足球"/>足球</td>
</tr>
 

我們首先定義了一個性別和興趣的單選，多選功能。

對於radio的情況我們在js中編寫這樣一段程式碼

var sexdata = document.getElementsByName("sex");
var stuSex;
if(sexdata[0].checked ){
    stuSex = "男";
}else if(sexdata[1].checked){
    stuSex= "女";
} else{
    stuSex = "其他";
}

我們可以通過name=sex得到一組性別的資料。而 .checked 為檢驗是否被選中，若選中返回true 未選中返回false。

這種方法採用從上到下依次檢驗某一元件是否被選中，若選中賦值給變數，輸出

這種分支語句適用於選項比較少的情況下，還可以採用迴圈語句

var sexdata = document.getElementsByName("sex");

var stusex;
	
for (var i = 0 ;i<sexdata.length;i++) {
		
if (sexdata[i].checked == 1) {

    stusex = sexdata[i].value;
}}

當i值小於陣列長度時，判斷第i個元素是否被選中，若選中便賦值給變數，輸出

對於checkbox的情況

var hobbydata = document.getElementsByName("hobby");
var stuhobby="";	
for (var i= 0 ;i< hobbydata.length;i++) {
    if(hobbydata[i].checked == 1){
        if(stuhobby!=""){	
	    stuhobby=stuhobby+","+hobbydata[i].value;
        }else{
            stuhobby = hobbydata[i].value;
}}}
 

 我們根據name="hobby"得到興趣的元素

因為checkbox為多選，我們不可能一次輸出答案，所以定義變數為字串型別

當i值小於陣列長度時，判斷第i個元素是否被選中，若選中則判斷是否為第一個要輸出的元素

若是第一個便賦便將value值給變數，若不是第一個元素則將 變數+，+value 賦值給變數

還有一個<select> <option>下拉選項。

<tr>
<td align="right" bordercolor="blue">專&nbsp;業</td>
<td><select name="data" >
<option>--請選擇--</option>
<option>電腦科學與技術</option>
<option>有點意思</option>
</select></td>
</tr>

這個如果是按照正經方法應該也是跟上面一樣。但是，誰讓     +戲精本精呢

我悄摸摸的試了試這個方法

var stuDatas = document.getElementsByName("data");
var zydata = stuDatas[0].value;

然後我發現能正確顯示。。。。。

哦，前提是這個stuDatas[0]是select的元件。

日常推歌————《你有沒有見過他》慕容毓

你有沒有見過在花市賞著魚的那個他

他有沒有向你朗誦閃電一般霹靂詩歌

是否提及去年的我嘆氣像是在黃昏沮喪的春色

將語未落卻把茶水緩慢遞給脣舌

你有沒有見過用報紙折青蛙的那個他

他有沒有教你摘下風中搔癢難愈的月色

曾麻木渡過哪條河絲毫不錯愕用目光托起船舸

將語未落卻把茶水緩慢遞給脣舌