當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 通過JS代碼如何獲取復選框的選擇項

通過JS代碼如何獲取復選框的選擇項

2012/11/1 20:09:07作者：佚名來源：網絡

移動端

【實例名稱】

通過JS代碼如何獲取復選框的選擇項

【實例描述】

復選框由多個checkbox構成。本例學習如何判斷用戶的選擇，并獲取用戶的選擇值。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（www.yzddtk.cn）</title>
<script language="JavaScript">
function mySelect()
{
     var i=0;
     var j=0;
     var selectObj=document.getElementsByName("love");
     //遍歷復選框的選擇
    for (i=0;i<selectObj.length;i++) {
        if (selectObj[i].checked) {
          j=1;
          break;
        }
    }
    if (j!=1) {
      alert("請選擇至少一種愛好！")
         return false;
    }
    alert(selectObj[i].value);//顯示所選擇的第一項的內容
}
</script>
</head>
<body>
<form name="form1">
<input type="checkbox" name="love" value="旅游" >旅游
<input type="checkbox" name="love" value="體育" >體育<br/>
<input type="checkbox" name="love" value="購物" >購物
<input type="checkbox" name="love" value="影視" >影視
<input type="checkbox" name="love" value="音樂" >音樂
<input type="button" value="我的選擇" onclick="mySelect()">
</form>
</html>

【運行效果】

獲取復選框的選擇項運行效果

【難點剖析】

本例的重點是獲取用戶選擇的復選框，并顯示復選框的值復選框的值用“value”表示，在當前頁面中必須唯一?！癱hecked”屬性用來判斷復選框是否被選中。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性，你可以點擊：獲取復選框的選擇項進行本實例源碼下載

標簽：復選框

上一篇：JS代碼實現復選框全選(2)
下一篇：什么是一體機電腦，好不好用

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频