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

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>

 

 

JS

$(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

  }

 

你可能感兴趣的:(jquery)