JQuery对单选框，复选框，下拉菜单的操作

浏览数：28 / 时间：2015年06月09日

JSP

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
    + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
 %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
  <head>
   <base href="<%=basePath%>">
   <link rel="stylesheet" type="text/css" media="screen"
    href="css/practices.css" />
      <script src="js/jquery.js" type="text/javascript"></script>
   <script src="js/practices.js" type="text/javascript"></script>
  </head>

 <body>
   
   <div class="divFrame2">
    <div class="divTitle2"> 请输入如下信息</div>
    <div class="divContent2">
     姓名：<input id="Text1" type="text" class="txtCss"/><br />
     性别：<input id="Radio1" name="rdoSex" type="radio" value=" 男" /> 男
      <input id="Radio2" name="rdoSex" type="radio" value=" 女" /> 女<br />
     婚否：<input id="Checkbox1" name="marry" type="checkbox" />
     <br/><br/><br/>爱好：<br/>
     乒乓球：<input id="Checkbox2" name="hobby"  type="checkbox" value="乒乓球" /><br/>
     台&nbsp;&nbsp;&nbsp;&nbsp;球：<input id="Checkbox3"   name="hobby" type="checkbox" value="台球" /><br/>
     篮&nbsp;&nbsp;&nbsp;&nbsp;球：<input id="Checkbox4"   name="hobby" type="checkbox" value="篮球" /><br/>
     足&nbsp;&nbsp;&nbsp;&nbsp;球：<input id="Checkbox5"   name="hobby" type="checkbox" value="足球" /><br/>
     游&nbsp;&nbsp;&nbsp;&nbsp;泳：<input id="Checkbox6"   name="hobby" type="checkbox" value="游泳" /><br/>
     <a id="selectAll">全选</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="disAll">取消</a><br>
     <br/><br/><br/>来自何方：<br/>
     <select name="where"> 
      <option value="hk">Hong Kong</option> 
      <option value="tw" selected>Taiwan</option> 
      <option value="cn">China</option> 
      <option value="us">United States</option> 
      <option value="ca">Canada</option> 
     </select>
  
      <div class="divBtn">
        <input id="Button1" type="button" value=" 提交" class="btnCss" />
       </div>
    </div>
   </div>
   <div id="divTip" class="divTip"></div>
  </body>
 </html>

$(document).ready(function() {
  // do something here

 $(".divTitle").click(function(){
   
   //next(selected)函数:找到后面紧邻的同辈元素中类名为selected的元素。 
  $(this).addClass("divCurrColor1")
       .next(".divContent1").css("display","block");

  });
   
   $("#selectAll").click(function (){
         
         $("input[@name=‘hobby‘]").attr("checked",true);
     });
     $("#disAll").click(function (){
         
         $("input[@name=‘hobby‘]").attr("checked",false);
     });
     
   $("#Button1").click(function(){
         
       // 获取文本框的值
      var oTxtValue=$("#Text1").val();
      
       
       // 获取单选框按钮值
      //用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
      var oRdoValue=$("#Radio1").is(":checked") ? " 男":" 女";
      
      //下面的这个alert是尝试用其他办法获得单选框的值
     //得到单选框的选中项的值(注意中间没有空格)
        alert($("input[@type=radio][@checked]").val());
       
       
       // 获取复选框按钮值
      var oChkValue=$("#Checkbox1").attr("checked") ? " 已婚":" 未婚";
       var hobby="";
       $("input[@name=hobby][@checked]").each(function(){
    hobby=hobby+$(this).val()+" ";
   });
       
       //下面的这几个alert是尝试用不同的办法获得checkbox是否被选中
      alert($("#Checkbox1").is(":checked") ? " 已婚":" 未婚");
       alert($("#Checkbox1").attr("checked")+"  2");
       alert($("input[@id=‘Checkbox1‘]").attr("checked")+"   3");
       alert($("input[@name=‘Checkbox1‘]").is(":checked")+"   4");
       
       var hefang="";
       //得到下拉菜单的选中项的值
     // hefang=$("select[@name=where] option[@selected]").val();
      
      //得到下拉菜单的选中项的文本(注意中间有空格)
      //表示具有name 属性，并且该属性值为’country’ 的select元素里面的具有selected 属性的option 元素。
     //可以看出有@开头的就表示后面跟的是属性。
      hefang=$("select[@name=where] option[@selected]").text();
      
      // 显示提示文本元素
      $("#divTip").css("display","block");
       // 设置文本元素的内容
      
       $("#divTip").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue+"<br>"+hobby+"<br>"+hefang);
   });
     
 });

CSS

.divFrame2{
  width:260px;
  border:solid 1px #666;
  font-size:10pt
  }
 .divTitle2{
  background-color:#eee;
  padding:5px
  }
 .divContent2{
  padding:8px;
  font-size:9pt
  }
 .divTip{
  width:244px;
  border:solid 1px #666;
  padding:8px;font-size:9pt;
  margin-top:5px;display:none
  }
 .txtCss{
  border:solid 1px #ccc
  }
 .divBtn{
  padding-top:5px
  }
 .divBtn .btnCss{
  border:solid 1px #535353;
  width:60px
  }