jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
更新时间：2015年06月25日 11:58:47 投稿：hebedich
这篇文章主要介绍了jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证的相关资料,需要的朋友可以参考下
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//按钮
$("#but").click(function(){
alert("This is my JSP page");
});
//文本框
$("#btext").click(function(){
alert($("#te").val());
});
//下拉框
$("#sel").change(function(){
alert($("#sel").val());
});
//单选框
$("#uradio1").click(function(){
alert($('input[name="radiobuttid=on"]:checked').val());
});
$("#uradio2").click(function(){
alert($('input[name="radiobutton"]:checked').val());
});
$("#uradio3").click(function(){
alert($('input[name="radiobutton"]:checked').val());
});
//复选框
$("#ucheck").click(function(){
var str="";//定义一个数组
$('input[name="checkbox"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数
str+=$(this).val();//将选中的值添加到数组chk_value中
});
alert(str);
});
//全选
$("#checkall").click(function(){
$("input[name='items']").attr("checked",true);
});
//全不选
$("#checkallNo").click(function(){
$("input[name='items']").attr("checked",false);
});
//反选
$("#check_revsern").click(function(){
$("input[name='items']").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
});
});
//全选/反选
$("#checkItems").click(function(){
$("input[name='items']").attr("checked",$(this).get(0).checked);
});
//表单验证
$("#nameid").hide();
$("#ageid").hide();
$("#ubu").click(function(){
if($("#name").val()==""){
$("#nameid").show();
$("#nameid").fadeOut(3000);
return false;
}else if($("#age").val()==""){
$("#ageid").show();
$("#ageid").fadeOut(3000);
return false;
}
alert($("#sel").val());
alert("姓名："+$("#name").val()+" "+"年龄"+$("#age").val() );
});
});
</script>
</head>
<body>
<!-- 按钮 -->
<input type="button" value="确认" id="but"/><br>
<!-- 文本框 -->
<input type="text" name="text" id="te" /><input type="button" id="btext" value="取值"><br>
<!-- 下拉框 -->
<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<!-- 单选框 -->
<input type="radio" name="radiobutton" id="uradio1" value="1"> 1
<input type="radio" name="radiobutton" id="uradio2" value="2"> 2
<input type="radio" name="radiobutton" id="uradio3" value="3"> 3
<br>
<!-- 复选框 -->
<input type="checkbox" name="checkbox" value="1"> 1
<input type="checkbox" name="checkbox" value="2"> 2
<input type="checkbox" name="checkbox" value="3"> 3
<input type="checkbox" name="checkbox" value="4"> 4
<input type="button" id="ucheck" value="确定">
<br>
<!-- 复选框的全选和反选 -->
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
<!-- 表单验证 -->
<form action="">
姓名：<input type="text" id="name"><span id="nameid" style="color:#f00;">姓名不能为空！</span><br>
年龄：<input type="text" id="age"/><span id="ageid" style="color:#f00;">年龄不能为空！</span> <br>
<input type="button" id="ubu" value="确定" />
</form>
</body>
</html>
菜鸟第一次发布，如有不对还望指出
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要介绍了个人手机的常用的jQuery前端技巧,需要的朋友可以参考下2014-12-12
当我们点击表格里面的标题显示相关的详细信息，比如点击新闻标题显示正文，而正文通常是在一个页面里面，通过获取传递的参数id查询数据库，然后显示出来2011-11-11
这篇文章主要介绍了基于jquery实现彩色投票进度条代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
jQuery Mobile和HTML5的组合可以直接开发web版的app，下面通过本教程给大家分享jQuery Mobile和HTML5开发App推广注册页的实例代码，感兴趣的朋友参考下吧2016-11-11
这篇文章主要介绍了jQuery遮罩层效果,结合实例形式较为详细的分析了jQuery实现遮罩层的原理与相关技术细节,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jquery实现浮动在网页右下角的彩票开奖公告窗口代码,涉及jquery窗体的弹出及隐藏相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细介绍了jQuery实现简单五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了jQuery响应滚动条事件功能,可实现针对滚动条状态的实时计算与响应功能,具有一定参考借鉴价值,需要的朋友可以参考下2017-10-10
下面就日常最常用的，在Form表单中如何获取被中选的Radio值做一小小的示例，感兴趣的朋友可以参考下2013-08-08
jquery下jstree简单应用，学习jstree的朋友可以参考下。2011-04-04
最新评论