如何在jsp頁面中獲取select,radio,checkbox的值

在頁面中如何獲取radio,select,checkbox的值,使用jq或者js來獲取,第一次寫,

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>

</head>
<body>
<!-- 測試目的,得到選中的select,radio,checkbox的類型的值 -->

<form>
   <select id="selectedValue">
       <option value ="0">測試1</option>
       <option value="1">測試2
       <option value="2">測試3
   </select>
   <input type="button" value="獲取select" id="getValue">
   <br>
   <input type="radio" name="radioValue" value="strong" onchange="radioChange(this);">男
   <input type="radio" name="radioValue" value="sex" onchange="radioChange(this);">女
   <br>
   <input type="checkbox" name="checkboxValue" value="飛機">飛機
   <input type="checkbox" name="checkboxValue" value="公交">公交
   <input type="checkbox" name="checkboxValue" value="汽車">汽車
   <input type="button" value="獲取checkbox值" id="getCheckboxValue">
</form>
<script type="text/javascript">
   $(function(){
       $("#getValue").click(function(){
           /* var str = $("#selectedValue option:selected").val(); */
           var str = document.getElementById("selectedValue").value;
           alert("--select選中值-----"+str);
       });

       $("#getCheckboxValue").click(function(){
           var str = document.getElementsByName("checkboxValue");
           var arr = str.length;
           var tar = "";
           for(var i=0;i<arr;i++){
               if(str[i].checked == true){
                   tar+=str[i].value+",";
               }
           }
           if(tar==""){
               alert("請選擇一個愛好");
           }else{
               alert("你的愛好是---"+tar);
           }
       });
   });

   function radioChange(tar){
       var str = tar.value;
       alert("選中的值----"+str);
   }
</script>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章