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>

$(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对单选框，复选框，下拉菜单的操作的更多相关文章

jQuery 前端复选框全选反选下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
html-4, form 表单输入、传文件、单选、多选、下拉菜单、文本描述、重置、submit、按钮限制输入
<!-- form HTTP协议 action:提交的服务器网址 method:get(默认)| post(应用:登录注册.上传文件) 页面中的a img link 默认是get请求 input ...
关于通过jq /js 实现验证单选框复选框是否都有被选中
今天项目中遇到一个问题就是要实现,单选框,复选框同时都被选中才能进行下一步的问题,开始用js原生来写怎么写都觉得不合适,通过for循环得出复选框被选中的,在通过for循环得出单选框被选中的,问 ...
jquery：获取checked复选框的问题
jquery:获取checked复选框的问题功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...
php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
iCheck获取单选和复选框的值和文本
//获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...
jquery单选框复选框表格高亮选中
单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...
selenium+Python（定位单选、复选框，多层定位）
1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

随机推荐

scanf从文件中读入，printf写入到文件
重定向方式读写文件 #include <stdio.h> #define LOCAL int main() { #ifdef LOCAL freopen("input.txt&q ...
《Linear Algebra and Its Applications》-chaper4-向量空间-子空间、零空间、列空间
在线性代数中一个非常重要的概念就是向量空间R^n,这一章节将主要讨论向量空间的一系列性质. 一个向量空间是一些向量元素构成的非空集合V,需要满足如下公理: 向量空间V的子空间H需要满足如下三个条件: ...
找出数组中出现次数超过一半的数，现在有一个数组，已知一个数出现的次数超过了一半，请用O(n)的复杂度的算法找出这个数
找出数组中出现次数超过一半的数,现在有一个数组,已知一个数出现的次数超过了一半,请用O(n)的复杂度的算法找出这个数 #include<iostream>using namespace s ...
php操作Memcache示例
<?php //==============================实例化============================ $mem=new Memcache; //====== ...
窗体控件回车事件分类： WinForm 2014-11-21 10:45 233人阅读评论(0) 收藏
说明: (1)设置窗体控件的TabIndex属性,(按回车顺序设置TabIndex的大小) (2)修改窗体的一个属性:KeyPreview=true //protected override void ...
jQuery 实现上下,左右滑动
前几天的任务:http://t.sina.com.cn/ 的下滑效果. 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白我们要做的是向左移动效果.这个效果用时需添加一 ...
IAAS云计算产品畅想-云主机产品内涵
这里所涉及的主要还是狭义的云主机产品. 主要还是谈云主机产品中公有云产品与私有云产品相比赋予更多的含义: 产品广义理解:公有云主机的最大特点就是基础资源按需支付从这一句话中可以体现出来两个含义: 产 ...
Java HexString
byte[]和十六进制字符串相互转换 Java中byte用二进制表示占用8位,而我们知道16进制的每个字符需要用4位二进制位来表示. 所以我们就可以把每个byte转换成两个相应的16进制字符,即把by ...
The Boost C++ Libraries
" ...one of the most highly regarded and expertly designed C++ library projects in the world.&q ...
树莓派安装mjpg-streamer视频监控分类： Raspberry Pi 2015-04-12 23:41 144人阅读评论(0) 收藏
原来使用Motion在树莓派上跑1280x720分辨率的三颗摄像头.占用内存太严重,关闭诸多功能之后还是不行.故转战mjpg-streamer. 首先安装所需软件 sudo apt-get insta ...

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

JQuery对单选框，复选框，下拉菜单的操作的更多相关文章

随机推荐

热门专题