您的位置：首页 > Web前端 > JQuery

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

2014-03-05 17:53 423 查看

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/>
台    球：<input id="Checkbox3"   name="hobby" type="checkbox" value="台球" /><br/>
篮    球：<input id="Checkbox4"   name="hobby" type="checkbox" value="篮球" /><br/>
足    球：<input id="Checkbox5"   name="hobby" type="checkbox" value="足球" /><br/>
游    泳：<input id="Checkbox6"   name="hobby" type="checkbox" value="游泳" /><br/>
<a id="selectAll">全选</a>    <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
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航